/*
  CW-ARCADE — DESIGN TOKENS
  Single authoritative source for color, type, spacing, radius, glass
  material, illumination and motion. Every other stylesheet reads these
  custom properties instead of hard-coding values.
*/

/* Typed custom property backing the holocard rotating-border effect
   (css/components.css .audience-card) — must be a top-level @property
   rule, not nested in a selector, for the browser to treat --angle as
   an animatable <angle> rather than an opaque token. */
@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

:root {
  /* ---------- Color: surface ---------- */
  --void: #06070a;
  --graphite-950: #08090d;
  --graphite-900: #0b0e13;
  --graphite-800: #11151c;
  --graphite-700: #171c25;
  --graphite-600: #212733;
  --hairline: rgba(255, 255, 255, 0.08);
  --hairline-strong: rgba(255, 255, 255, 0.14);

  /* ---------- Color: ink ---------- */
  --ink: #eef3f8;
  --ink-dim: rgba(238, 243, 248, 0.64);
  --ink-faint: rgba(238, 243, 248, 0.40);
  --ink-ghost: rgba(238, 243, 248, 0.22);

  /* ---------- Color: brand + accents ---------- */
  --cyan: #00adfc;
  --cyan-soft: #6bd6ff;
  --cyan-dim: rgba(0, 173, 252, 0.16);
  --teal: #17e8c8;
  --violet: #7c5cff;
  --violet-soft: #b998ff;
  --magenta: #ff4fd8;
  --gold: #ffc155;
  --ember: #ff7a2b;
  --ember-deep: #ff2d1f;
  --ash: #9aa0aa;

  /* gradient shorthands */
  --grad-brand: linear-gradient(135deg, var(--cyan) 0%, var(--teal) 100%);
  --grad-edge: linear-gradient(
    140deg,
    rgba(0, 173, 252, 0.9),
    rgba(255, 255, 255, 0.05) 40%,
    rgba(255, 255, 255, 0.02) 60%,
    rgba(124, 92, 255, 0.55)
  );

  /* ---------- Neon signature system (css/neon.css) ----------
     Default brand arc for .neon-ring; .neon-glow-inner cards override
     --neon-1/--neon-2 per instance to match their own accent. */
  --neon-1: var(--cyan-soft);
  --neon-2: var(--violet);
  --neon-3: var(--magenta);

  /* ---------- Typography ---------- */
  --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --fs-eyebrow: 0.72rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-h4: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem);
  --fs-h3: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-h2: clamp(2.1rem, 1.6rem + 2vw, 3.25rem);
  --fs-h1: clamp(2.6rem, 1.7rem + 3.6vw, 5rem);
  --fs-stat: clamp(2.25rem, 1.7rem + 2vw, 3.4rem);

  --lh-tight: 1.04;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;
  --tracking-wider: 0.18em;

  /* ---------- Spacing (4px grid) ---------- */
  --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;

  --section-pad-y: clamp(4.5rem, 4rem + 3vw, 8.5rem);
  --content-width: 1240px;
  --content-wide: 1440px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---------- Radius ---------- */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --radius-full: 999px;

  /* ---------- Glass material ---------- */
  --glass-bg: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.055),
    rgba(255, 255, 255, 0.014)
  );
  --glass-bg-strong: linear-gradient(
    155deg,
    rgba(255, 255, 255, 0.09),
    rgba(255, 255, 255, 0.025)
  );
  --glass-border: rgba(255, 255, 255, 0.11);
  --glass-blur: 20px;
  --glass-shadow: 0 30px 70px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);

  /* ---------- Elevation / shadow ---------- */
  --shadow-ambient: 0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-contact: 0 2px 6px rgba(0, 0, 0, 0.4);
  --glow-cyan: 0 0 42px rgba(0, 173, 252, 0.35);
  --glow-ember: 0 0 46px rgba(255, 106, 43, 0.35);

  /* ---------- Motion ---------- */
  --ease-engineered: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-back: cubic-bezier(0.2, 1.4, 0.4, 1);
  --dur-micro: 180ms;
  --dur-reveal: 620ms;
  --dur-slow: 1100ms;

  color-scheme: dark;
}

/* Reduced-motion: shorten/disable rather than fight every animation
   individually — components read this to skip their JS entirely. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-micro: 1ms;
    --dur-reveal: 1ms;
    --dur-slow: 1ms;
  }
}