/* Kairox Studios - Design Tokens */

:root {
  /* Backgrounds */
  --color-bg:          #0a0a0a;
  --color-surface:     #0f0f0f;
  --color-surface-2:   #141414;
  --color-surface-3:   #1a1a1a;
  --color-overlay:     rgba(10, 10, 10, 0.85);

  /* Studio brand gradient (deep black to storm blue) */
  --color-brand-deep:  #0a0a0a;
  --color-brand-mid:   #1a3a5c;
  --color-brand-high:  #2d6a9f;
  --color-accent:      #2d6a9f;
  --color-accent-glow: #3d82c0;
  --color-electric:    #4da8e8;

  /* Text */
  --color-text:        #f0f0f0;
  --color-text-2:      rgba(240, 240, 240, 0.65);
  --color-text-3:      rgba(240, 240, 240, 0.35);
  --color-text-inv:    #0a0a0a;

  /* Borders */
  --color-border:      rgba(255, 255, 255, 0.06);
  --color-border-2:    rgba(255, 255, 255, 0.12);
  --color-border-3:    rgba(255, 255, 255, 0.20);

  /* Game-specific palettes */
  --veilborn-gold:     #c9a84c;
  --veilborn-gold-dim: rgba(201, 168, 76, 0.25);
  --veilborn-brd:      #8b2346;
  --veilborn-brd-dim:  rgba(139, 35, 70, 0.20);

  --kurogane-crimson:  #c0392b;
  --kurogane-crim-dim: rgba(192, 57, 43, 0.20);
  --kurogane-ash:      #8a9ba8;
  --kurogane-ash-dim:  rgba(138, 155, 168, 0.15);

  --neonfall-cyan:     #00e5ff;
  --neonfall-cyan-dim: rgba(0, 229, 255, 0.15);
  --neonfall-purple:   #9b59b6;
  --neonfall-pur-dim:  rgba(155, 89, 182, 0.20);

  /* Typography */
  --font-display: 'Cinzel', 'Trajan Pro', serif;
  --font-body:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Mono', monospace;

  /* Font scale (fluid) */
  --text-xs:   clamp(0.625rem, 0.6rem + 0.2vw, 0.75rem);
  --text-sm:   clamp(0.75rem, 0.7rem + 0.3vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --text-3xl:  clamp(2rem, 1.6rem + 2vw, 3rem);
  --text-4xl:  clamp(2.5rem, 1.8rem + 3.5vw, 4.5rem);
  --text-5xl:  clamp(3rem, 2rem + 5vw, 6.5rem);
  --text-hero: clamp(3.5rem, 2rem + 7vw, 9rem);

  /* Spacing (8dp rhythm) */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --space-48: 12rem;

  /* Layout */
  --max-width:     1400px;
  --content-width: 1200px;
  --narrow-width:  800px;
  --gutter:        clamp(1.5rem, 4vw, 4rem);

  /* Radius */
  --radius-sm: 2px;
  --radius:    4px;
  --radius-lg: 8px;

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   180ms;
  --duration-base:   320ms;
  --duration-slow:   600ms;
  --duration-slower: 1000ms;

  /* Z-index layers */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:  10;
  --z-overlay: 50;
  --z-nav:    100;
  --z-modal:  200;
}