/**
 * Wavecon Blind Box - Design Tokens
 *
 * Source of truth for all colors, typography, spacing, motion curves.
 * All section CSS files (hero, tiers, winners, etc) reference these vars.
 *
 * Color strategy: COMMITTED (one primary + one secondary accent, both rare
 * enough to feel distinct, not the AI-default purple-pink combo).
 *
 *   --ink-lime:    #C9FF00   acid lime (the "treasure glow")
 *   --ink-violet:  #7B2CBF   royal violet (the "mystery shadow")
 *   --ink-bg:      #050505   OLED black background
 *   --ink-surface: #0E0E10   Vantablack card surface
 *   --ink-fg:      #F5F5F0   warm white (passes 18:1 contrast on #050505)
 *   --ink-mute:    #9A9A95   muted body (passes 7:1 on #050505)
 *
 * Typography:
 *   --font-display: 'Clash Display' (Pangram Pangram, via Fontshare, locally hosted WOFF2)
 *   --font-body:    'General Sans' (Fontshare, locally hosted WOFF2)
 *
 * Motion:
 *   --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1)  (expo-out, high-end feel)
 *   --ease-spring:    cubic-bezier(0.32, 0.72, 0, 1) (iOS-like spring)
 *   --dur-fast:       180ms
 *   --dur-base:       350ms
 *   --dur-slow:       800ms
 *
 * Spacing: 4pt base. Steps: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128, 192.
 *
 * Memory: do not change --ink-lime to the obvious neon. Do not change --font-display
 * to Inter. Do not animate top/left/width/height. All animation uses transform/opacity.
 */

/* === Font face (locally hosted WOFF2) === */
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('../fonts/clash-display-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'General Sans';
  src: url('../fonts/general-sans-600.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* === Root tokens (OKLCH + computed hex fallbacks for old browsers) === */
:root {
  /* color */
  --ink-bg:        #050505;
  --ink-surface:   #0E0E10;
  --ink-surface-2: #16161A;
  --ink-line:      rgba(255, 255, 255, 0.08);
  --ink-line-2:    rgba(255, 255, 255, 0.14);
  --ink-fg:        #F5F5F0;
  --ink-mute:      #9A9A95;
  --ink-dim:       #6B6B66;
  --ink-lime:      #C9FF00;   /* primary glow - "treasure" */
  --ink-lime-soft: rgba(201, 255, 0, 0.18);
  --ink-lime-line: rgba(201, 255, 0, 0.32);
  --ink-violet:    #7B2CBF;   /* secondary - "mystery" */
  --ink-violet-soft: rgba(123, 44, 191, 0.22);
  --ink-violet-line: rgba(123, 44, 191, 0.40);
  --ink-rose:      #FF3B7C;   /* used sparingly, only for hot accents on tier-5 */
  --ink-amber:     #FFD600;   /* tier-4 inner light */

  /* type */
  --font-display: 'Clash Display', system-ui, -apple-system, sans-serif;
  --font-body:    'General Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* type scale - clamp() for fluid scaling, ≥1.25 ratio between steps */
  --fs-12: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem);
  --fs-14: clamp(0.84rem, 0.82rem + 0.10vw, 0.90rem);
  --fs-16: clamp(0.95rem, 0.92rem + 0.15vw, 1.05rem);
  --fs-18: clamp(1.05rem, 1.00rem + 0.25vw, 1.20rem);
  --fs-20: clamp(1.15rem, 1.10rem + 0.30vw, 1.35rem);
  --fs-24: clamp(1.30rem, 1.20rem + 0.50vw, 1.55rem);
  --fs-32: clamp(1.60rem, 1.40rem + 1.00vw, 2.10rem);
  --fs-48: clamp(2.20rem, 1.80rem + 2.00vw, 3.20rem);
  --fs-64: clamp(2.80rem, 2.20rem + 3.00vw, 4.20rem);
  --fs-96: clamp(3.80rem, 2.80rem + 5.00vw, 6.20rem);
  --fs-128: clamp(4.80rem, 3.40rem + 7.00vw, 8.20rem);

  --lh-tight:  1.04;
  --lh-snug:   1.16;
  --lh-base:   1.55;
  --lh-loose:  1.75;

  --ls-tight:  -0.045em;  /* display headings - tight tracking */
  --ls-base:   -0.01em;
  --ls-eyebrow: 0.18em;   /* for tiny eyebrow labels */

  /* spacing - 4pt base, generous at macro level */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* radius - squircle-ish, larger for premium feel */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-2xl: 44px;
  --r-pill: 999px;

  /* shadows - soft ambient, never harsh */
  --sh-glow-lime:   0 0 48px -8px rgba(201, 255, 0, 0.55), 0 0 96px -16px rgba(201, 255, 0, 0.30);
  --sh-glow-violet: 0 0 48px -8px rgba(123, 44, 191, 0.55), 0 0 96px -16px rgba(123, 44, 191, 0.30);
  --sh-card:        0 1px 0 0 rgba(255,255,255,0.05) inset, 0 24px 60px -24px rgba(0,0,0,0.65);
  --sh-float:       0 30px 80px -30px rgba(0,0,0,0.75), 0 8px 24px -8px rgba(0,0,0,0.55);

  /* motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.32, 0.72, 0, 1);
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  180ms;
  --dur-base:  350ms;
  --dur-slow:  800ms;
  --dur-pulse: 4000ms;

  /* z-index scale (semantic, not arbitrary) */
  --z-base: 0;
  --z-bg:   1;
  --z-content: 10;
  --z-sticky: 100;
  --z-modal-back: 500;
  --z-modal: 510;
  --z-toast: 1000;
}

/* === Reset (surgical, only what we need) === */
html[data-motion] body,
body.wavecon-blinds {
  background: var(--ink-bg);
  color: var(--ink-fg);
  font-family: var(--font-body);
  font-size: var(--fs-16);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

[data-blinds] {
  /* outermost wrapper, opaque bg to block theme body bg leaking */
  background: var(--ink-bg);
  color: var(--ink-fg);
  position: relative;
  isolation: isolate;
}

/* === Reveal animation (data-reveal) === */
/* progressive enhancement: visible by default, hidden when .js is on html */
[data-reveal] {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}
.js [data-reveal]:not([data-revealed="1"]) {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
}
.js [data-reveal][data-revealed="1"] {
  opacity: 1;
  transform: translateY(0);
}

/* staggered children - progressive enhancement */
[data-reveal="stagger"] > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity var(--dur-slow) var(--ease-out-expo),
              transform var(--dur-slow) var(--ease-out-expo);
}
.js [data-reveal="stagger"]:not([data-revealed="1"]) > * {
  opacity: 0;
  transform: translateY(20px);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.js [data-reveal="stagger"][data-revealed="1"] > * {
  opacity: 1;
  transform: translateY(0);
}

/* === Reduced motion: kill all transforms, keep crossfades === */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal="stagger"] > * {
    opacity: 0;
    transform: none;
    transition: opacity 200ms linear;
  }
  [data-reveal][data-revealed="1"],
  [data-reveal="stagger"][data-revealed="1"] > * {
    opacity: 1;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 200ms !important;
  }
}

/* === img policy (memory: !important on img styles) === */
[data-blinds] img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}