/* ===================================================================
   Limestone Technology Group -- Style Guide v2.0 (Sept 23, 2026).

   Loaded AFTER style.css. It changes no rules; it only redefines custom
   properties, so every one of style.css's ~192KB of existing rules picks
   up v2 values at use-time without being touched.

   Why a bridge rather than an edit: style.css was already written against
   the v1 guide, and the two guides agree on the brand constants exactly --
   #183149 text, #102B46 navy, #FF8200 orange, #8FB9D8 blue, Sora. v2's
   changes are refinements to the surface/divider/role values, not a new
   palette. Redefining the dozen tokens that moved is the whole diff;
   rewriting the stylesheet to --ltg-* names would be a 192KB no-op change
   with a real chance of breaking the cascade that file's own header warns
   about.

   Theme attribute: v2's package ships [data-ltg-theme="signature|midnight"].
   This app has an existing, working toggle on [data-theme="light|dark"]
   (base.html, persisted to localStorage). The ATTRIBUTE is the app's; the
   VALUES are v2's. Signature maps to light, Midnight to dark. The third v2
   theme, Limestone (warm reading surface), is defined but unused here --
   wired's sibling app Records already owns the warm surface, and the guide
   assigns Signature as the product default.
   =================================================================== */

:root {
  /* Brand constants -- identical in v1 and v2, restated here as the
     canonical names so new components can reference the guide's own
     vocabulary instead of this app's older aliases. */
  --ltg-font: Sora, Aptos, "Segoe UI", Arial, sans-serif;
  --ltg-navy: #102B46;
  --ltg-blue: #8FB9D8;
  --ltg-orange: #FF8200;
  /* Fixed in both themes, unlike --ltg-live below -- this is a solid fill
     with a white foreground (the Record now button, the Quick Start
     shutter), not text/an icon sitting on a surface. --ltg-live has to
     brighten in dark mode so red TEXT stays legible against a dark chip;
     a white-on-red BUTTON has no such constraint, and switching it to
     dark mode's pale pink just made white illegible on it instead. */
  --ltg-live-solid: #D6394F;

  --ltg-radius-control: 8px;
  --ltg-radius-card: 12px;
  --ltg-radius-dialog: 14px;
  --ltg-target: 44px;
  --ltg-sidebar: 232px;
  --ltg-content-max: 1200px;
  --ltg-motion-fast: 120ms;
  --ltg-motion-standard: 180ms;

  --ltg-space-4: 4px;
  --ltg-space-8: 8px;
  --ltg-space-12: 12px;
  --ltg-space-16: 16px;
  --ltg-space-24: 24px;
  --ltg-space-32: 32px;
  --ltg-space-48: 48px;
  --ltg-space-64: 64px;
}

/* ---- Signature (light) -- the product default ---- */
:root {
  --ltg-canvas: #F3F6F9;
  --ltg-surface: #FFFFFF;
  --ltg-subtle: #EDF3F7;
  --ltg-text: #183149;
  --ltg-text-secondary: #536674;
  --ltg-divider: #D4DEE6;
  --ltg-control-border: #718393;
  --ltg-action: #102B46;
  --ltg-on-action: #FFFFFF;
  --ltg-link: #245C80;
  --ltg-focus: #245C80;
  --ltg-success: #206446;
  --ltg-success-surface: #EDF8F1;
  --ltg-warning: #854700;
  --ltg-warning-surface: #FFF3E4;
  --ltg-danger: #AA293D;
  --ltg-danger-surface: #FFF0F2;
  /* A session actually recording -- distinct from --ltg-danger (errors,
     delete) even though both are red: this one means "capturing right
     now", not "something's wrong". Lighter/more vivid than the danger
     maroon on purpose -- red reads as recording, not alarm. */
  --ltg-live: #D6394F;
  --ltg-live-surface: #FDECEE;
}

/* ---- Midnight (dark) ----
   Declared twice, matching style.css's own convention: once for the OS
   preference when the user has not chosen, once for an explicit choice.
   The selectors must stay in this order and at this specificity or the
   toggle stops being able to force light on a dark-preferring OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ltg-canvas: #0B1725;
    --ltg-surface: #13283D;
    --ltg-subtle: #1B354E;
    --ltg-text: #F4F7FA;
    --ltg-text-secondary: #B7C9D8;
    --ltg-divider: #344D63;
    --ltg-control-border: #819AB1;
    --ltg-action: #8FB9D8;
    --ltg-on-action: #102B46;
    --ltg-link: #A8D1EF;
    --ltg-focus: #A8D1EF;
    --ltg-success: #9DDEC0;
    --ltg-success-surface: #163C31;
    --ltg-warning: #FFC781;
    --ltg-warning-surface: #493317;
    --ltg-danger: #FFB7C2;
    --ltg-danger-surface: #4B2330;
    --ltg-live: #FF8FA0;
    --ltg-live-surface: #3A1A20;
  }
}
:root[data-theme="dark"] {
  --ltg-canvas: #0B1725;
  --ltg-surface: #13283D;
  --ltg-subtle: #1B354E;
  --ltg-text: #F4F7FA;
  --ltg-text-secondary: #B7C9D8;
  --ltg-divider: #344D63;
  --ltg-control-border: #819AB1;
  --ltg-action: #8FB9D8;
  --ltg-on-action: #102B46;
  --ltg-link: #A8D1EF;
  --ltg-focus: #A8D1EF;
  --ltg-success: #9DDEC0;
  --ltg-success-surface: #163C31;
  --ltg-warning: #FFC781;
  --ltg-warning-surface: #493317;
  --ltg-danger: #FFB7C2;
  --ltg-danger-surface: #4B2330;
  --ltg-live: #FF8FA0;
  --ltg-live-surface: #3A1A20;
}

/* ===================================================================
   The bridge: this app's existing semantic names, expressed in v2 values.

   Only the tokens whose value actually MOVED between v1 and v2 appear
   here. --ink, --nav, --orange and the Sora stack are already byte-identical
   in style.css and are deliberately left alone rather than restated, so this
   file stays a readable list of what changed rather than a second copy of
   the palette.

   Verified 2026-09-23 against WCAG 2.2 AA, both themes: every role colour
   below clears 4.5:1 as text on its own surface (lowest is
   --ltg-text-secondary at 5.96:1 light / 8.84:1 dark), and
   --ltg-control-border clears the 3:1 non-text bar at 3.91:1.
   =================================================================== */
/* `:root:root` is deliberate, not a typo. style.css declares its tokens in
   three places, two of which -- `:root:not([data-theme="light"])` inside the
   dark media query, and `:root[data-theme="dark"]` -- carry specificity
   (0,2,0). A plain `:root` here is (0,1,0) and loses to both no matter how
   late it loads, which silently leaves dark mode on v1 values while light
   mode takes v2 (confirmed live before this was fixed). Repeating `:root`
   matches (0,2,0), and being the later file wins the tie -- so one mapping
   block covers all three of style.css's contexts instead of being
   triplicated to mirror them. */
:root:root {
  /* Page ground and panels. v2 cools the light canvas a half-step
     (#F3F6F9 vs v1's #F8FAFB) and darkens the dark ground. */
  --soft: var(--ltg-canvas);
  --surface: var(--ltg-surface);
  --line: var(--ltg-divider);

  /* v2 splits what v1 called --steel into a control border and a
     secondary text colour. --steel was already documented in style.css as
     "borders, decorative icons, disabled -- NEVER body text", which is
     exactly v2's --ltg-control-border, so the split lands cleanly. */
  --steel: var(--ltg-control-border);
  --muted: var(--ltg-text-secondary);

  /* Role colours. v1 and v2 agree on meaning; v2 retunes each value.
     The -bg tints come from v2's own *-surface tokens rather than being
     mixed, so a tint is the guide's colour and not an approximation. */
  --info: var(--ltg-link);
  --live: var(--ltg-success);
  --pending: var(--ltg-warning);
  --danger: var(--ltg-danger);
  --neutral: var(--ltg-text-secondary);

  --info-bg: color-mix(in srgb, var(--ltg-link) 10%, var(--ltg-surface));
  --live-bg: var(--ltg-success-surface);
  --pending-bg: var(--ltg-warning-surface);
  --danger-bg: var(--ltg-danger-surface);
  --neutral-bg: var(--ltg-subtle);
}

/* The focus ring is a v2 requirement in its own right: 3px solid, 4px
   offset, and Highlight under forced colours. style.css's own ring is
   thinner, so this is one of the few places v2 changes a RULE and not
   just a value. */
:focus-visible {
  outline: 3px solid var(--ltg-focus);
  outline-offset: 4px;
}
@media (forced-colors: active) {
  :focus-visible { outline-color: Highlight; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --ltg-motion-fast: 0ms; --ltg-motion-standard: 0ms; }
}