/* Cosmic Card Series — design tokens
   Drop this file into any page and use the variables and the .cc-* helpers. */

:root {
  /* Base — X-native dark */
  --cc-bg: #000000;
  --cc-surface-top: #07070d;
  --cc-surface-bottom: #030306;
  --cc-surface: linear-gradient(180deg, var(--cc-surface-top) 0%, var(--cc-surface-bottom) 100%);
  --cc-art-bg: radial-gradient(circle at 50% 50%, #0d0b1f 0%, #000000 78%);
  --cc-border: #2f3336;
  --cc-divider: #1c1d24;
  --cc-track: #16181c;
  --cc-text: #e7e9ea;
  --cc-text-muted: #71767b;
  --cc-text-dim: #2f3336;
  --cc-button-bg: #eff3f4;
  --cc-button-bg-hover: #d7dbdc;
  --cc-button-text: #0f1419;

  /* Plates: lifted containers without a hard border */
  --cc-plate: linear-gradient(180deg, rgba(255,255,255,.035) 0%, rgba(255,255,255,.01) 100%), #07070d;
  --cc-plate-edge: inset 0 1px 0 rgba(255,255,255,.07), inset 0 0 0 1px rgba(255,255,255,.035), 0 24px 60px -36px rgba(0,0,0,.9);
  --cc-plate-edge-hover: inset 0 1px 0 rgba(255,255,255,.1), inset 0 0 0 1px rgba(255,255,255,.07), 0 24px 60px -30px rgba(0,0,0,.9);

  /* Cosmic palette — used only through rarity, art and accents */
  --cc-violet: #8b5cf6;
  --cc-magenta: #ff4fa3;
  --cc-amber: #ffb547;
  --cc-cyan: #3ee6d6;
  --cc-blue: #1d9bf0;
  --cc-sky: #8ecbff;
  --cc-white: #ffffff;
  --cc-grey: #8b98a5;

  /* Rarity rims */
  --cc-rim-common: #2f3336;
  --cc-rim-rare: conic-gradient(from 0deg, #1d9bf0, #3ee6d6, #0a3a6b, #1d9bf0);
  --cc-rim-epic: conic-gradient(from 0deg, #8b5cf6, #ff4fa3, #ffb547, #8b5cf6);
  --cc-rim-singular: conic-gradient(from 0deg, #8b5cf6, #ff4fa3, #ffb547, #3ee6d6, #1d9bf0, #8b5cf6);
  --cc-rim-locked: repeating-linear-gradient(45deg, #2f3336 0px, #2f3336 6px, #0b0c0f 6px, #0b0c0f 12px);

  /* Rarity tags (gradient text) */
  --cc-tag-common: linear-gradient(90deg, #8b98a5, #8b98a5);
  --cc-tag-rare: linear-gradient(90deg, #1d9bf0, #3ee6d6);
  --cc-tag-epic: linear-gradient(90deg, #8b5cf6, #ff4fa3, #ffb547);
  --cc-tag-singular: linear-gradient(90deg, #8b5cf6, #ff4fa3, #ffb547, #3ee6d6);
  --cc-tag-locked: linear-gradient(90deg, #71767b, #71767b);

  /* Rarity glow (outer halo) */
  --cc-glow-common: rgba(0, 0, 0, 0);
  --cc-glow-rare: rgba(29, 155, 240, 0.14);
  --cc-glow-epic: rgba(255, 79, 163, 0.16);
  --cc-glow-singular: rgba(139, 92, 246, 0.22);

  /* Holo foil */
  --cc-foil: repeating-linear-gradient(115deg, #8b5cf6 0%, #ff4fa3 7%, #ffb547 14%, #3ee6d6 21%, #1d9bf0 28%, #8b5cf6 35%);
  --cc-foil-common: 0.04;
  --cc-foil-rare: 0.10;
  --cc-foil-epic: 0.16;
  --cc-foil-singular: 0.24;

  /* Type */
  --cc-font: 'Geist', system-ui, -apple-system, sans-serif;
  --cc-font-mono: 'Geist Mono', ui-monospace, monospace;

  /* Card geometry */
  --cc-card-w: 260px;
  --cc-card-h: 400px;
  --cc-card-radius: 20px;
  --cc-rim-width: 1.5px;
  --cc-card-pad: 14px;
  --cc-card-gap: 12px;
  --cc-art-h: 168px;
  --cc-art-radius: 12px;
  --cc-card-shadow: 0 30px 70px rgba(0, 0, 0, 0.75);

  /* Motion */
  --cc-ease-spring: cubic-bezier(.2, 1.25, .4, 1);
  --cc-ease-pop: cubic-bezier(.3, 1.9, .5, 1);
  --cc-ease-out: cubic-bezier(.2, .9, .3, 1);
  --cc-ease-flip: cubic-bezier(.3, 1.3, .5, 1);
  --cc-dur-deal: 900ms;
  --cc-dur-flip: 750ms;
  --cc-dur-tilt: 140ms;
  --cc-dur-rim: 6s;
  --cc-stagger: 110ms;
}

/* Keyframes the system relies on */
@keyframes cc-deal { 0% { opacity: 0; transform: translateY(90px) rotateY(-120deg) scale(.7) } 50% { opacity: 1 } 100% { opacity: 1; transform: none } }
@keyframes cc-spin { to { transform: rotate(360deg) } }
@keyframes cc-shine { 0% { transform: translateX(-200%) skewX(-20deg) } 28%, 100% { transform: translateX(560%) skewX(-20deg) } }
@keyframes cc-twinkle { 0%, 100% { opacity: .2 } 50% { opacity: 1 } }
@keyframes cc-pulse { 0%, 100% { transform: scale(.8); opacity: .6 } 50% { transform: scale(1.15); opacity: 1 } }
@keyframes cc-ignite { 0% { opacity: 0; transform: scale(.2); filter: brightness(3) } 40% { opacity: 1 } 100% { opacity: 1; transform: scale(1); filter: brightness(1) } }
@keyframes cc-shock { 0% { opacity: .9; transform: scale(.2) } 60%, 100% { opacity: 0; transform: scale(1.8) } }
@keyframes cc-fill { from { transform: scaleX(0) } to { transform: scaleX(1) } }

.cc-plate { border: 0; background: var(--cc-plate); box-shadow: var(--cc-plate-edge); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition: none !important;
  }
}