/* =========================================================
   TOKENS — the single source of truth for the design system.

   A premium, cinematic dark aesthetic: near-black canvas, generous
   negative space, restrained neon accents used as light rather than
   decoration. Glass is a highlight, not a default.

   Nothing outside this file may hard-code a colour or a size.
========================================================= */

:root{
  /* ---- surfaces ---- */
  --c-bg:            #09090B;
  --c-surface:       #15161A;
  --c-surface-hi:    #1A1C22;
  --c-border:        rgba(255,255,255,.08);
  --c-border-strong: rgba(255,255,255,.16);

  /* ---- text ---- */
  --c-text:          #FFFFFF;
  --c-text-muted:    #B4B7C5;
  --c-text-faint:    #8B90A0;

  /* ---- accents ----
     Blue is the primary voice. The rest are supporting light: used for
     ambient glow and the occasional signal, never all at once. */
  --c-accent:        #4F8CFF;
  --c-cyan:          #49D6FF;
  --c-purple:        #8A5CFF;
  --c-green:         #3DFFAE;
  --c-orange:        #FF8248;

  --c-accent-hover:  #7FABFF;
  --c-accent-soft:   rgba(79,140,255,.14);
  --c-accent-glow:   rgba(79,140,255,.38);
  --c-on-accent:     #09090B;

  --c-danger:        var(--c-orange);
  --c-success:       var(--c-green);

  /* ---- type ---- */
  --font-display: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-md:   1.125rem;
  --fs-lg:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --fs-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  --fs-2xl:  clamp(2rem, 1.4rem + 2.8vw, 3.25rem);
  --fs-3xl:  clamp(2.75rem, 1.6rem + 5vw, 5.25rem);

  --lh-tight: 1.08;
  --lh-snug:  1.35;
  --lh-body:  1.7;

  /* display type is set tight; body stays open and readable */
  --tracking-tight: -0.035em;
  --tracking-wide:  0.16em;

  /* ---- space ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4.5rem;
  --sp-9: 7rem;
  --sp-10: 10rem;

  /* ---- shape ---- */
  --radius-sm:   12px;
  --radius:      20px;
  --radius-lg:   30px;   /* cards */
  --radius-pill: 999px;  /* buttons */

  /* ---- elevation / light ---- */
  --shadow-lg:   0 30px 80px rgba(0,0,0,.6);
  --glow-accent: 0 0 40px var(--c-accent-glow);
  --blur-glass:  blur(20px);

  /* ---- layout: 12-column grid, 1440 max ---- */
  --shell-max:  1440px;
  --measure:    1120px;   /* text stays readable inside the wider shell */
  --shell-pad:  var(--sp-6);
  --grid-cols:  12;
  --grid-gap:   var(--sp-5);
  --dock-h:     5.5rem;

  /* ---- motion: slow and cinematic ---- */
  --ease-out:   cubic-bezier(.22,1,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --dur-fast:   .25s;
  --dur:        .5s;
  --dur-slow:   .9s;
  --dur-cine:   1.4s;
}

@media (max-width: 900px){
  :root{
    --shell-pad: var(--sp-5);
    --sp-9: 5rem;
    --sp-8: 3.5rem;
  }
}

@media (max-width: 720px){
  :root{
    --shell-pad: var(--sp-4);
    --dock-h: 4.5rem;
  }
}