/* ============================================================
   GROK PREDICTOR — design tokens v3
   "Eclipse" identity: black / red / grey — dark always, soft geometry.
   Layer 1: primitives. Layer 2: semantic aliases. Layer 3 lives
   in the component stylesheets and only references these vars.
   Dark is the only theme.
   ============================================================ */
:root{
  color-scheme:dark;
  /* ── primitive: black ── */
  --gp-ink:        #060607;  /* page base — pure black */
  --gp-coal:       #0E0E10;  /* surface — panels, cards */
  --gp-soot:       #161618;  /* raised — wells, inputs, hover */
  --gp-ash:        #1E1E21;  /* highest flat surface */

  /* ── primitive: grey ── */
  --gp-chalk:      #F4F5F7;  /* primary text */
  --gp-smoke:      #A7ABB3;  /* secondary text */
  --gp-fog:        #6E737C;  /* muted text, placeholders */
  --gp-steel:      #3A3D44;  /* disabled text */

  /* ── primitive: red ── */
  --gp-red:        #E10600;  /* primary brand — racing red */
  --gp-red-hot:    #FF2E1F;  /* hot red — live, energy */
  --gp-red-deep:   #8F0400;  /* deep red — pressed states */
  --gp-red-ink:    #FFFFFF;  /* text on red */
  --gp-ember:      #FF6B5E;  /* error / destructive (distinct from brand red) */
  --gp-ember-ink:  #3A0B08;

  /* ── virtual predictions status green (only used for the on/off determinant) ── */
  --vp-green:      #00C878;
  --vp-green-tint: rgba(0,200,120,.12);

  /* ── primitive: line ── */
  --gp-line:       #232529;  /* hairline borders */
  --gp-line-strong:#34373D;  /* emphasis borders */

  /* ── semantic ── */
  --bg:            var(--gp-ink);
  --surface:       var(--gp-coal);
  --surface-2:     var(--gp-soot);
  --surface-3:     var(--gp-ash);
  --text:          var(--gp-chalk);
  --text-2:        var(--gp-smoke);
  --text-3:        var(--gp-fog);
  --primary:       var(--gp-red);
  --primary-ink:   var(--gp-red-ink);
  --primary-hot:   var(--gp-red-hot);
  --accent:        var(--gp-red-hot);
  --accent-ink:    var(--gp-red-ink);
  --success:       var(--gp-red);
  --success-ink:   var(--gp-red-ink);
  --warning:       var(--gp-red-hot);
  --danger:        var(--gp-ember);
  --danger-ink:    var(--gp-ember-ink);
  --border:        var(--gp-line);
  --border-strong: var(--gp-line-strong);

  /* legacy aliases — older markup/JS references these names */
  --red:           var(--gp-ember);  /* error red */
  --green:         var(--gp-red);    /* was money-green; brand red now means go/success */
  --yellow:        #F5B301;          /* gold accent for badges/warnings */
  --ink:           var(--text);      /* primary text */
  --ink70:         var(--text-2);    /* secondary text */
  --ink45:         var(--text-3);    /* muted text */
  --ink18:         var(--border);    /* hairline borders */
  --paper:         var(--surface);   /* card background */
  --paper2:        var(--surface-2); /* deep panel background */
  --f:             var(--font-body);
  --fd:            var(--font-display);
  --fm:            var(--font-mono);

  /* soft tints for fills (never decorative gradients) */
  --tint-primary:  rgba(225,6,0,0.12);
  --tint-accent:   rgba(255,46,31,0.12);
  --tint-danger:   rgba(255,107,94,0.12);
  --tint-grey:     rgba(167,171,179,0.10);
  --tint-info:     rgba(167,171,179,0.10);
  --info:          var(--gp-smoke);
  --scrim:         rgba(0,0,0,0.78);

  /* ── type ── */
  --font-display:"Chakra Petch","Arial Narrow",Impact,sans-serif;
  --font-body:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"Public Sans","Segoe UI",sans-serif;

  --text-xs:.72rem;
  --text-sm:.85rem;
  --text-base:1rem;
  --text-lg:1.2rem;
  --text-xl:1.5rem;
  --text-2xl:2rem;
  --text-3xl:2.75rem;
  --text-4xl:3.75rem;

  --leading-tight:1.05;
  --leading-base:1.55;
  --leading-loose:1.7;

  /* ── shape — soft, rounded, approachable ── */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --r-full:999px;

  /* ── rhythm ── */
  --s1:4px;
  --s2:8px;
  --s3:12px;
  --s4:16px;
  --s5:24px;
  --s6:32px;
  --s7:48px;
  --s8:64px;
  --s9:96px;
  --s10:128px;

  /* ── elevation — soft blurred depth ── */
  --sh-1:0 2px 10px rgba(0,0,0,.45),0 8px 28px rgba(0,0,0,.35);
  --sh-2:0 4px 18px rgba(0,0,0,.5),0 16px 48px rgba(0,0,0,.4);
  --sh-3:0 8px 32px rgba(0,0,0,.55),0 32px 80px rgba(0,0,0,.45);
  --sh-red:0 0 0 1px rgba(225,6,0,.35),0 10px 36px rgba(225,6,0,.32);

  /* ── motion ── */
  --dur-fast:120ms;
  --dur-med:220ms;
  --dur-slow:420ms;
  --ease-out:cubic-bezier(.22,.9,.28,1);

  /* ── layout ── */
  --wrap:1200px;
  --rail:264px;

  /* ── z ── */
  --z-fab:60;
  --z-sidebar:100;
  --z-nav:80;
  --z-modal:120;
  --z-toast:2147483600;   /* toasts must paint above open modals */
  --z-loader:300;
  /* High band (shell + open modals): the sidebar/hamburger use fixed
     positioning with their own stacking contexts; keep ONE ordered scale:
     overlay < sidebar < nav button < open modal < lightbox < toast. */
  --z-sidebar-overlay:2147482000;
  --z-sidebar-top:2147483000;
  --z-navbtn:2147483001;
  --z-modal-open:2147483500;
}

/* ── dark is the only theme: no light-scheme overrides ── */