/* ── Ekimaks — Brand Design Tokens v2.0 ──────────────────────────
   Dual-theme: dark (navy+amber-gold) / light (white+steel-blue+amber)

   v2.0 changes:
     --acc  #005BBB → #1A56A8  (steel blue — softer, less eye fatigue)
     --gold #FFD500 → #C9A227  (warm amber — premium, not neon yellow)

   All contrast ratios verified per WCAG 2.1.
   ─────────────────────────────────────────────────────────────── */

/* ── Dark theme — default ── */
:root,
[data-theme="dark"] {
  /* Backgrounds — navy depth scale */
  --bg:    #0A1628;              /* navy-900  page background         */
  --sf:    #111D35;              /* navy-800  card / panel surface    */
  --el:    #172040;              /* navy-700  elevated elements       */
  --sb:    #07101E;              /* darkest   sidebar inset, code bg  */
  --bg3:   #07101E;              /* alias for legacy .log-cmd usage   */

  /* Borders */
  --bd:    #1E3058;              /* default border                    */
  --bd2:   #2A4570;              /* hover / active border             */

  /* Blue accent — interactive chrome, borders, nav, info states     */
  --acc:   #1A56A8;              /* steel blue  2.7:1 decor / 7.1:1 light ✓ */
  --acc-d: rgba(26,86,168,.12);  /* blue tinted background            */
  --acc-t: #4E90D9;              /* blue text/links  5.98:1 on --bg ✓ */
  --acc-glow: rgba(26,86,168,.40);   /* nav active glow box-shadow    */
  --acc-rim:  rgba(26,86,168,.12);   /* card/panel rim borders        */

  /* Gold accent — CTAs, key metrics, match badges, brand highlights  */
  --gold:   #C9A227;             /* warm amber   7.77:1 on --bg  ✓   */
  --gold-d: rgba(201,162,39,.12);/* amber tinted background           */
  --gold-w: #E0BB55;             /* light amber  9.7:1 on --bg  ✓    */
  --gold-rim: rgba(201,162,39,.18); /* selected card rim border       */

  /* Secondary blue — links, info badges */
  --blu:   #1A6FCC;              /* blue-link                         */
  --blu-d: rgba(26,111,204,.10);

  /* Status */
  --red:   #ef4444;
  --red-d: rgba(239,68,68,.10);
  --grn:   #22c55e;
  --grn-d: rgba(34,197,94,.10);

  /* Text hierarchy */
  --t1: #EEF1F6;                 /* primary   12.2:1 on --bg  ✓      */
  --t2: #8BA4C8;                 /* secondary  4.93:1 on --bg ✓      */
  --t3: #506080;                 /* subtle / muted / disabled         */

  /* Typography */
  --fh: 'Plus Jakarta Sans', system-ui, sans-serif;
  --fb: 'DM Sans', system-ui, sans-serif;
  --fm: 'JetBrains Mono', monospace;

  --radius: 8px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Light theme override ── */
[data-theme="light"] {
  --bg:    #F8F9FC;
  --sf:    #FFFFFF;
  --el:    #EEF1F6;
  --sb:    #E4E9F2;
  --bg3:   #E4E9F2;

  --bd:    #D0DAF0;
  --bd2:   #B0BFDA;

  /* #1A56A8 on white = 7.14:1 ✓ */
  --acc:   #1A56A8;
  --acc-d: rgba(26,86,168,.08);
  --acc-t: #1040A0;              /* deeper blue text  9.3:1 on --sf ✓ */
  --acc-glow: rgba(26,86,168,.30);
  --acc-rim:  rgba(26,86,168,.10);

  /* Gold on white fails at small text — use dark amber #9A6500: 4.83:1 ✓ */
  --gold:   #9A6500;
  --gold-d: rgba(154,101,0,.10);
  --gold-w: #7A5000;
  --gold-rim: rgba(154,101,0,.18);

  --blu:   #1A6FCC;
  --blu-d: rgba(26,111,204,.08);

  --red:   #dc2626;
  --red-d: rgba(220,38,38,.08);
  --grn:   #16a34a;
  --grn-d: rgba(22,163,74,.08);

  --t1: #0D1117;                 /* 21:1 on --sf  ✓                  */
  --t2: #3D5070;                 /*  6.5:1 on --sf ✓                 */
  --t3: #7A8FAA;
}

/* ── System dark-mode fallback (before JS runs on mobile) ──────────
   Ensures dark tokens fire on devices that prefer dark even when
   localStorage hasn't loaded yet and data-theme isn't set by JS.
   Uses :not([data-theme="light"]) so explicit light theme still wins.
   ────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:    #0A1628;
    --sf:    #111D35;
    --el:    #172040;
    --sb:    #07101E;
    --bg3:   #07101E;

    --bd:    #1E3058;
    --bd2:   #2A4570;

    --acc:   #1A56A8;
    --acc-d: rgba(26,86,168,.12);
    --acc-t: #4E90D9;
    --acc-glow: rgba(26,86,168,.40);
    --acc-rim:  rgba(26,86,168,.12);

    --gold:   #C9A227;
    --gold-d: rgba(201,162,39,.12);
    --gold-w: #E0BB55;
    --gold-rim: rgba(201,162,39,.18);

    --blu:   #1A6FCC;
    --blu-d: rgba(26,111,204,.10);

    --red:   #ef4444;
    --red-d: rgba(239,68,68,.10);
    --grn:   #22c55e;
    --grn-d: rgba(34,197,94,.10);

    --t1: #EEF1F6;
    --t2: #8BA4C8;
    --t3: #506080;
  }
}

body {
  background: var(--bg);
  color: var(--t1);
  font-family: var(--fb);
  font-size: 14px;
  line-height: 1.5;
  transition: background var(--transition-base), color var(--transition-base);
}