/* ============================================================
   Tacklebox Tokens
   The single source of truth for palette, type, space, shape,
   elevation and motion. Loaded by BOTH the web layer (after Tabler,
   before tacklebox-theme.css) and the deck layer (tacklebox-deck.css),
   so a palette change moves the app and every deck together.

   Contains no component rules and no framework retargeting — those
   belong to the layer that consumes these tokens.

   Themes: light is the default. Dark applies under data-theme="dark"
   (decks, the design system) or data-bs-theme="dark" (Tabler's own
   attribute, which the app uses).
   ============================================================ */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root,
[data-theme="light"],
[data-bs-theme="light"] {
  /* Palette — warm graphite neutrals + heat-copper accent */
  --tbx-ink:            oklch(0.22 0.012 62);
  --tbx-ink-2:          oklch(0.34 0.010 62);
  --tbx-muted:          oklch(0.53 0.008 65);
  --tbx-faint:          oklch(0.66 0.006 70);

  --tbx-surface:        oklch(0.972 0.003 75);
  --tbx-raise:          oklch(0.995 0.001 80);
  --tbx-sunken:         oklch(0.948 0.004 75);
  --tbx-hover:          oklch(0.958 0.006 70);
  --tbx-selected:       oklch(0.955 0.020 250);

  --tbx-line:           oklch(0.885 0.005 70);
  --tbx-line-strong:    oklch(0.80 0.006 70);
  --tbx-line-faint:     oklch(0.925 0.004 70);

  /* Accents — equal chroma / lightness, hue varies. "Ember": closest
     direction to Thermon red, desaturated for UI use. */
  --tbx-heat:           oklch(0.56 0.16 27);
  --tbx-heat-deep:      oklch(0.46 0.15 25);
  --tbx-heat-wash:      oklch(0.955 0.03 27);
  /* Alternate accent, parked for later: "Signal Indigo" — pulled from the
     existing Tacklebox icon. Swap the three lines above for these three
     to switch the whole system over.
       --tbx-heat:      oklch(0.53 0.16 265);
       --tbx-heat-deep: oklch(0.43 0.15 265);
       --tbx-heat-wash: oklch(0.955 0.025 265);
  */
  --tbx-link:           oklch(0.52 0.140 252);
  --tbx-link-wash:      oklch(0.955 0.025 252);

  --tbx-ok:             oklch(0.525 0.120 156);
  --tbx-ok-wash:        oklch(0.955 0.030 156);
  --tbx-warn:           oklch(0.54 0.130 78);
  --tbx-warn-wash:      oklch(0.960 0.045 84);
  --tbx-danger:         oklch(0.52 0.170 27);
  --tbx-danger-wash:    oklch(0.958 0.030 27);

  /* Type */
  /* Inter is already self-hosted by the app (static/css/inter.css); this
     layer doesn't load a font, it just declares the stack. */
  --tbx-font: InterVariable, Inter, -apple-system, "Segoe UI", system-ui, sans-serif;
  --tbx-font-mono: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  /* InterVariable holds two drawings of each letter: a text cut for small
     sizes (wider, more open) and a display cut (tighter, crisper). Browsers
     blend toward the display cut as type gets larger, so slides get it on
     their own. Titles on the web ask for it by name, so a heading on a
     screen and a heading on a slide are the same letterforms. */
  --tbx-font-title: "opsz" 32;
  --tbx-track-title: -0.018em;
  --tbx-fs-micro: 10.5px;
  --tbx-fs-tiny:  11.5px;
  --tbx-fs-sm:    12.5px;
  --tbx-fs:       13.5px;
  --tbx-fs-md:    15px;
  --tbx-fs-lg:    18px;
  --tbx-fs-xl:    22px;
  --tbx-fs-2xl:   28px;
  --tbx-lh:       1.45;
  --tbx-lh-tight: 1.2;

  /* Space — 4px base, compact */
  --tbx-1: 2px;  --tbx-2: 4px;  --tbx-3: 6px;  --tbx-4: 8px;
  --tbx-5: 12px; --tbx-6: 16px; --tbx-7: 24px; --tbx-8: 32px; --tbx-9: 48px;

  /* Shape */
  --tbx-r-sm: 3px;
  --tbx-r:    5px;
  --tbx-r-lg: 8px;

  /* Controls */
  --tbx-control-h: 30px;
  --tbx-control-h-sm: 25px;
  --tbx-control-h-lg: 36px;
  --tbx-row-h: 32px;

  /* Elevation — used sparingly; borders do most of the work */
  --tbx-shadow-1: 0 1px 2px oklch(0.22 0.012 62 / 0.06);
  --tbx-shadow-2: 0 2px 4px oklch(0.22 0.012 62 / 0.07), 0 8px 24px oklch(0.22 0.012 62 / 0.08);
  --tbx-shadow-pop: 0 8px 32px oklch(0.22 0.012 62 / 0.16);
  --tbx-ring: 0 0 0 2px oklch(0.52 0.140 252);  /* solid tbx-link: 5.1:1 on surface */

  /* Motion — Tabler's own timings, named, so our additions move the same way.
     speed       state changes: hover, focus, color
     speed-move  things that move or appear: drawers, dialogs, the sidebar, toasts */
  --tbx-speed: 150ms;
  --tbx-speed-move: 300ms;
  --tbx-ease: ease-in-out;

  /* Emphasis surfaces. Two different jobs, don't mix them up:
     --tbx-inverse  always-dark slab (sidebar, hero, bulk bar). Fixed in both themes.
     --tbx-solid    highest-contrast solid against the current page (primary
                    button, active pager item, checked box). INVERTS per theme:
                    near-black on light, near-white on dark. Never use
                    --tbx-ink as a background — it flips and goes unreadable. */
  --tbx-inverse:        oklch(0.22 0.012 62);
  --tbx-on-inverse:     oklch(0.95 0.004 80);
  --tbx-solid:          oklch(0.22 0.012 62);
  --tbx-on-solid:       oklch(0.98 0.002 80);
  --tbx-on-accent:      oklch(0.99 0 0);
  /* Ember for text over tbx-inverse (eyebrows, accent phrases on title and
     section slides). Fixed like the slab: 5.6:1. The hairline stays --tbx-heat. */
  --tbx-heat-on-inverse: oklch(0.68 0.16 27);

  /* Fixed regardless of theme — the sidebar is always dark graphite */
  --tbx-navbar-bg: var(--tbx-inverse);

  /* Categorical — "which kind", never "how it's doing". Equal lightness and
     chroma, hue varies. Each hue has a fill, a wash for tinted badges, and
     an ink for text on that wash (6:1+ in both themes). The names match
     Tabler's twelve color names, which the web theme points at these. */
  --tbx-cat-red:    oklch(0.58 0.16 25);   --tbx-cat-red-wash:    oklch(0.955 0.03 25);   --tbx-cat-red-ink:    oklch(0.44 0.16 25);
  --tbx-cat-orange: oklch(0.62 0.15 55);   --tbx-cat-orange-wash: oklch(0.96 0.03 55);    --tbx-cat-orange-ink: oklch(0.44 0.15 55);
  --tbx-cat-yellow: oklch(0.68 0.13 85);   --tbx-cat-yellow-wash: oklch(0.965 0.03 85);   --tbx-cat-yellow-ink: oklch(0.44 0.13 85);
  --tbx-cat-lime:   oklch(0.65 0.16 122);  --tbx-cat-lime-wash:   oklch(0.96 0.03 122);   --tbx-cat-lime-ink:   oklch(0.44 0.16 122);
  --tbx-cat-green:  oklch(0.55 0.13 145);  --tbx-cat-green-wash:  oklch(0.955 0.03 145);  --tbx-cat-green-ink:  oklch(0.44 0.13 145);
  --tbx-cat-teal:   oklch(0.55 0.11 175);  --tbx-cat-teal-wash:   oklch(0.955 0.025 175); --tbx-cat-teal-ink:   oklch(0.44 0.11 175);
  --tbx-cat-cyan:   oklch(0.62 0.10 200);  --tbx-cat-cyan-wash:   oklch(0.96 0.02 200);   --tbx-cat-cyan-ink:   oklch(0.44 0.10 200);
  --tbx-cat-azure:  oklch(0.55 0.13 225);  --tbx-cat-azure-wash:  oklch(0.955 0.025 225); --tbx-cat-azure-ink:  oklch(0.44 0.13 225);
  --tbx-cat-blue:   oklch(0.53 0.14 250);  --tbx-cat-blue-wash:   oklch(0.955 0.025 250); --tbx-cat-blue-ink:   oklch(0.44 0.14 250);
  --tbx-cat-indigo: oklch(0.50 0.15 275);  --tbx-cat-indigo-wash: oklch(0.955 0.025 275); --tbx-cat-indigo-ink: oklch(0.44 0.15 275);
  --tbx-cat-purple: oklch(0.50 0.16 300);  --tbx-cat-purple-wash: oklch(0.955 0.025 300); --tbx-cat-purple-ink: oklch(0.44 0.16 300);
  --tbx-cat-pink:   oklch(0.58 0.16 335);  --tbx-cat-pink-wash:   oklch(0.955 0.03 335);  --tbx-cat-pink-ink:   oklch(0.44 0.16 335);
}

[data-theme="dark"],
[data-bs-theme="dark"] {
  --tbx-ink:            oklch(0.94 0.004 80);
  --tbx-ink-2:          oklch(0.84 0.005 80);
  --tbx-muted:          oklch(0.68 0.008 80);
  --tbx-faint:          oklch(0.56 0.008 80);
  --tbx-surface:        oklch(0.20 0.008 70);
  --tbx-raise:          oklch(0.245 0.009 70);
  --tbx-sunken:         oklch(0.17 0.008 70);
  --tbx-hover:          oklch(0.285 0.010 70);
  --tbx-selected:       oklch(0.30 0.035 252);
  --tbx-line:           oklch(0.33 0.008 70);
  --tbx-line-strong:    oklch(0.44 0.009 70);
  --tbx-line-faint:     oklch(0.28 0.008 70);
  --tbx-heat:           oklch(0.68 0.16 27);
  --tbx-heat-deep:      oklch(0.72 0.15 25);  /* 5.3:1 on heat-wash */
  --tbx-heat-wash:      oklch(0.30 0.05 27);
  --tbx-link:           oklch(0.72 0.120 252);
  --tbx-link-wash:      oklch(0.29 0.045 252);
  --tbx-ok:             oklch(0.70 0.110 156);
  --tbx-ok-wash:        oklch(0.28 0.045 156);
  --tbx-warn:           oklch(0.78 0.120 82);
  --tbx-warn-wash:      oklch(0.30 0.050 82);
  --tbx-danger:         oklch(0.68 0.150 27);
  --tbx-danger-wash:    oklch(0.29 0.055 27);
  --tbx-shadow-1: 0 1px 2px oklch(0 0 0 / 0.4);
  --tbx-shadow-2: 0 2px 4px oklch(0 0 0 / 0.4), 0 8px 24px oklch(0 0 0 / 0.35);
  --tbx-shadow-pop: 0 8px 32px oklch(0 0 0 / 0.55);
  --tbx-ring: 0 0 0 2px oklch(0.72 0.120 252);
  --tbx-solid:          oklch(0.93 0.004 80);
  --tbx-on-solid:       oklch(0.20 0.008 70);
  --tbx-on-accent:      oklch(0.18 0.010 40);
  --tbx-cat-red-wash: oklch(0.30 0.05 25); --tbx-cat-red-ink: oklch(0.80 0.16 25);
  --tbx-cat-orange-wash: oklch(0.30 0.05 55); --tbx-cat-orange-ink: oklch(0.80 0.15 55);
  --tbx-cat-yellow-wash: oklch(0.30 0.05 85); --tbx-cat-yellow-ink: oklch(0.80 0.13 85);
  --tbx-cat-lime-wash: oklch(0.30 0.05 122); --tbx-cat-lime-ink: oklch(0.80 0.16 122);
  --tbx-cat-green-wash: oklch(0.30 0.05 145); --tbx-cat-green-ink: oklch(0.80 0.13 145);
  --tbx-cat-teal-wash: oklch(0.30 0.05 175); --tbx-cat-teal-ink: oklch(0.80 0.11 175);
  --tbx-cat-cyan-wash: oklch(0.30 0.05 200); --tbx-cat-cyan-ink: oklch(0.80 0.10 200);
  --tbx-cat-azure-wash: oklch(0.30 0.05 225); --tbx-cat-azure-ink: oklch(0.80 0.13 225);
  --tbx-cat-blue-wash: oklch(0.30 0.05 250); --tbx-cat-blue-ink: oklch(0.80 0.14 250);
  --tbx-cat-indigo-wash: oklch(0.30 0.05 275); --tbx-cat-indigo-ink: oklch(0.80 0.15 275);
  --tbx-cat-purple-wash: oklch(0.30 0.05 300); --tbx-cat-purple-ink: oklch(0.80 0.16 300);
  --tbx-cat-pink-wash: oklch(0.30 0.05 335); --tbx-cat-pink-ink: oklch(0.80 0.16 335);
  color-scheme: dark;
}

/* Re-resolve ink inside the themed subtree. body's `color` is resolved where
   body sits — if data-theme is on an inner wrapper rather than <html>, any
   text inheriting from body keeps the *other* theme's ink and goes
   unreadable. Applies to both placements, so either wiring is safe. */
[data-theme],
[data-bs-theme] { color: var(--tbx-ink); }