/* =====================================================================
   TOMORROWLAND — tokens.css
   Design tokens for "the observatory" (CONTRACTS §9).
   Every colour, type stack, spacing step, radius and ease curve lives
   here. Components consume tokens only — no raw hex outside this file
   (world palettes are runtime-injected custom properties, see below).
   ===================================================================== */

:root {
  /* ---- Canvas & surfaces ------------------------------------------ */
  --canvas:        #070b12;                    /* near-black blue */
  --panel:         #0d131d;
  --panel-raised:  #111927;                    /* hover / elevated */
  --panel-sunken:  #0a0f18;                    /* wells, inputs */
  --hairline:      rgba(148, 170, 200, 0.14);
  --hairline-strong: rgba(148, 170, 200, 0.28);
  --scrim:         rgba(4, 7, 12, 0.78);       /* modal backdrop */

  /* ---- Text -------------------------------------------------------- */
  --text:          #e8eef7;
  --text-2:        #8fa3bd;                    /* secondary */
  --text-3:        #5b6c85;                    /* tertiary / disabled */

  /* ---- Signal accents ---------------------------------------------- */
  --phosphor:      #5ee6a0;                    /* live data, scores, readiness */
  --phosphor-dim:  rgba(94, 230, 160, 0.16);
  --phosphor-glow: rgba(94, 230, 160, 0.35);
  --break:         #e6635e;                    /* warnings, breaks, drops */
  --break-dim:     rgba(230, 99, 94, 0.16);
  --data:          #7fb4e6;                    /* neutral data */
  --data-dim:      rgba(127, 180, 230, 0.16);
  --amber:         #e6c35e;                    /* partial / watchlist */
  --amber-dim:     rgba(230, 195, 94, 0.14);

  /* ---- Tomorrowland visual brand ----------------------------------- */
  --brand-paper:   #f4eadb;
  --brand-paper-soft: rgba(244, 234, 219, 0.78);
  --brand-coral:   #ef463a;
  --brand-coral-dim: rgba(239, 70, 58, 0.18);
  --brand-coral-veil: rgba(239, 70, 58, 0.08);
  --brand-cyan:    #27c4df;
  --brand-cyan-dim: rgba(39, 196, 223, 0.16);
  --brand-cyan-veil: rgba(39, 196, 223, 0.08);
  --brand-ink:     #250f12;
  --brand-gold:    #f0b64f;
  --brand-gold-dim: rgba(240, 182, 79, 0.16);
  --brand-line:    rgba(244, 234, 219, 0.18);
  --brand-line-hot: rgba(244, 234, 219, 0.34);
  --brand-shadow-red: 0 24px 80px -34px rgba(239, 70, 58, 0.58);
  --brand-shadow-cyan: 0 24px 80px -34px rgba(39, 196, 223, 0.55);

  /* ---- World palette (runtime-swapped on the .world-themed root).
         Acts inside a world call ctx.theme.apply(palette) which sets
         these; ctx.theme.clear() restores the defaults below. -------- */
  --w-a:           var(--phosphor);            /* world primary accent */
  --w-b:           var(--data);                /* world secondary */
  --w-glow:        rgba(94, 230, 160, 0.20);   /* ambient glow */
  --w-tint:        rgba(94, 230, 160, 0.04);   /* panel wash */

  /* ---- Type stacks (no webfonts — designed for the stack) ---------- */
  --font-display:  'New York', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-ui:       -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', sans-serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, 'Cascadia Mono', monospace;

  /* ---- Type scale --------------------------------------------------- */
  --fs-hero:       3.35rem;
  --fs-display:    2rem;
  --fs-title:      1.25rem;
  --fs-body:       0.9375rem;   /* 15px */
  --fs-small:      0.8125rem;   /* 13px */
  --fs-micro:      0.6875rem;   /* 11px — telemetry labels */

  --lh-tight:      1.08;        /* display serif */
  --lh-snug:       1.3;
  --lh-body:       1.55;
  --track-caps:    0.14em;      /* letterspacing for micro caps labels */

  /* ---- Spacing ------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;

  /* ---- Radii -------------------------------------------------------- */
  --r-1: 3px;                   /* chips, small controls */
  --r-2: 6px;                   /* buttons, inputs */
  --r-3: 10px;                  /* panels, cards */
  --r-round: 999px;

  /* ---- Motion ------------------------------------------------------- */
  --ease-out:      cubic-bezier(0.22, 1, 0.36, 1);    /* confident arrive */
  --ease-in-out:   cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:   cubic-bezier(0.34, 1.3, 0.64, 1);  /* dials, badges */
  --t-fast:        200ms;
  --t-med:         320ms;
  --t-slow:        640ms;

  /* ---- Layout ------------------------------------------------------- */
  --rail-w:        216px;       /* HUD rail */
  --inspector-w:   340px;       /* right dossier/inspector column */
  --measure:       65ch;        /* booklet reading measure */
  --stage-max:     1200px;
  --app-topbar-h:  56px;

  /* ---- Z ------------------------------------------------------------ */
  --z-rail:        40;
  --z-toast:       80;
  --z-modal:       100;
  --z-interstitial: 120;

  /* ---- Focus -------------------------------------------------------- */
  --focus-ring:    0 0 0 2px var(--canvas), 0 0 0 4px var(--data);

  /* ---- Depth & glow (the "designed" layer) ------------------------- */
  --glow-phosphor: 0 0 28px rgba(94, 230, 160, 0.22);
  --glow-world:    0 0 32px var(--w-glow);
  --shadow-panel:  0 1px 0 rgba(255,255,255,0.02) inset, 0 18px 48px -24px rgba(0,0,0,0.7);
  --shadow-lift:   0 24px 60px -28px rgba(0,0,0,0.85);
  /* readiness grade accents (gamification: a named outcome, not just a number) */
  --grade-fragile:     var(--break);
  --grade-exposed:     var(--amber);
  --grade-resilient:   var(--data);
  --grade-futureproof: var(--phosphor);

  color-scheme: dark;
}

@media (max-width: 700px) {
  :root {
    --fs-hero:      2.35rem;
    --fs-display:   1.65rem;
    --app-topbar-h: 52px;
  }
}