/* =====================================================================
   GearVault — theme defaults (single source of truth for tokens).
   ---------------------------------------------------------------------
   Loaded in every page's <head> BEFORE gv.css. Values mirror the
   gv-ui block inside gv.css so the final cascade is unchanged, but
   they now also paint correctly during the brief window before gv.css
   parses (fixing the FOUC caused by per-page inline :root blocks
   that used to define slightly different hex values).

   Per-page inline <style> blocks no longer need to re-declare these.
   If a page wants to add ONE-OFF tokens, it can — they will inherit
   alongside these defaults.

   The accent and theme are then patched at runtime by branding.js
   (admin-configured) and by the synchronous pre-paint snippet in
   each page's <head> (which reads localStorage.gvTheme +
   localStorage.gvAccent + localStorage.gvAccentLight before any paint).

   Two accents are tracked because the slate and light themes have very
   different surface luminance — a vivid mid-tone amber like #f5a623 hits
   only ~1.8:1 contrast on white, which fails WCAG AA. Storing a separate
   --accent-on-light lets each theme have a guaranteed-readable accent.
   The [data-theme="light"] selector below remaps --accent to use the
   light variant with !important so it wins over any inline --accent JS
   may have set during runtime theme switches.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root,
[data-theme="slate"] {
  /* Slate dark — neutral, no blue tint. */
  --bg:           #0e1116;
  --surface:      #151a22;
  --surface2:     #1c222d;
  --surface3:     #242b39;
  --surface-2:    #1c222d;   /* legacy alias for gv-modern selectors */
  --surface-3:    #242b39;
  --border:       #232a37;
  --border2:      #2e3645;
  --border-2:     #2e3645;
  --text:         #e9ecf2;
  --text2:        #a4adbe;
  --text3:        #6c7689;
  --text4:        #4a5365;
  --text-2:       #a4adbe;
  --text-3:       #6c7689;
  --text-4:       #4a5365;

  /* Accent — overridden by the pre-paint script (from localStorage.gvAccent)
     and by branding.js once /api/branding resolves. All four tints below
     are derived from --accent at runtime via color-mix(), so a single
     write to --accent updates everything.
     --accent-on-light is the separately-stored light-theme accent. It's
     declared here on :root so it has a sensible default even when no
     [data-theme] attribute is set, and overridden on [data-theme="light"]
     below to become the active --accent. */
  --accent:                #f5a623;
  --accent-on-light:       #b76b00;
  --accent-soft:  color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-ring:  color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-dim:   color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-glow:  color-mix(in srgb, var(--accent) 14%, transparent);
  /* Foreground text/icon color that sits ON the accent fill (primary
     buttons, logo tile "G", etc). Both tokens are page-default values for
     light/bright accents — branding.js overrides each from the server's
     pickReadableFg() so dark accents (e.g. navy) get white text. */
  --accent-fg:             #1a0f00;
  --accent-fg-on-light:    #1a0f00;

  /* Logo backdrop — a per-theme color (or the literal 'transparent') for
     the tile behind an uploaded logo. Two are tracked because a logo
     designed for one theme often needs a contrasting backdrop on the
     other. branding.js overrides each from the customer's settings.
     --logo-backdrop is the active value (remapped to whichever theme is
     in use by the [data-theme="..."] rule below). The :has(img) rule in
     gv.css applies it only when a real logo is present; the no-logo
     default brand mark always sits on the accent tile. */
  --logo-backdrop-slate:   transparent;
  --logo-backdrop-light:   transparent;
  --logo-backdrop:         var(--logo-backdrop-slate);

  /* Legacy alias — admin/import.html and a handful of inline styles
     reference --amber. Mapped here so they pick up the patched accent. */
  --amber:        var(--accent);
  --amber-dim:    var(--accent-soft);

  /* Status palette. WCAG-AA on every surface. */
  --teal:         #2dd4a0;
  --teal-soft:    color-mix(in srgb, var(--teal) 12%, transparent);
  --teal-dim:     color-mix(in srgb, var(--teal) 18%, transparent);
  --red:          #ef5a5a;
  --red-soft:     color-mix(in srgb, var(--red) 12%, transparent);
  --red-dim:      color-mix(in srgb, var(--red) 18%, transparent);
  --blue:         #5b8def;
  --blue-soft:    color-mix(in srgb, var(--blue) 12%, transparent);
  --blue-dim:     color-mix(in srgb, var(--blue) 18%, transparent);
  --green:        #6abf69;
  --green-dim:    color-mix(in srgb, var(--green) 18%, transparent);
  --purple:       #9d7cf4;
  --purple-soft:  color-mix(in srgb, var(--purple) 12%, transparent);
  --purple-dim:   color-mix(in srgb, var(--purple) 18%, transparent);

  --radius:       8px;
  --radius-sm:    6px;
  --radius-lg:    12px;
  --radius-xl:    16px;

  --shadow-sm:    0 1px 2px rgba(0, 0, 0, .35);
  --shadow:       0 4px 16px rgba(0, 0, 0, .35);
  --shadow-lg:    0 18px 50px rgba(0, 0, 0, .55);

  /* Motion */
  --t-fast:       130ms;
  --t-med:        220ms;
  --t-slow:       380ms;
  --ease:         cubic-bezier(.2, .7, .2, 1);
  --ease-out:     cubic-bezier(.16, 1, .3, 1);

  /* Typography. --mono is intentionally aliased to --font; the original
     monospace styling was removed in the design refresh. Use `.tnum`
     (or font-variant-numeric:tabular-nums) when columns need to align. */
  --font:         'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono:         var(--font);
}

[data-theme="light"] {
  --bg:           #f5f7fa;
  --surface:      #ffffff;
  --surface2:     #f1f3f7;
  --surface3:     #e7ebf2;
  --surface-2:    #f1f3f7;
  --surface-3:    #e7ebf2;
  --border:       #e2e6ee;
  --border2:      #ced3df;
  --border-2:     #ced3df;
  --text:         #1a1f2c;
  --text2:        #4d5566;
  --text3:        #7b8499;
  --text4:        #a0a8b8;
  --text-2:       #4d5566;
  --text-3:       #7b8499;
  --text-4:       #a0a8b8;

  /* Force --accent to the light variant. !important wins over the inline
     --accent the pre-paint script writes for slate theme — so a runtime
     theme switch from slate→light immediately picks up the light accent
     without needing to clear the inline style. The :root default for
     --accent-on-light is #b76b00 (burnt orange, AA on white); branding.js
     overrides --accent-on-light from the customer's settings. */
  --accent:       var(--accent-on-light) !important;
  /* Accent text/button foreground — uses the LIGHT-theme variant which
     branding.js computes server-side from accent_on_light via
     pickReadableFg(). A customer with a dark-navy accent_on_light gets
     white; an amber accent_on_light gets black. !important matches the
     --accent rule above so a runtime theme switch from slate→light picks
     up the right foreground immediately, regardless of inline values. */
  --accent-fg:    var(--accent-fg-on-light) !important;

  /* Light-theme tints stay subtle (~14%) on purpose — strong tints make
     the colored text feel muted because the text and background share
     the same hue, which the eye reads as low differentiation even when
     the luminance contrast is well over AA. The pill *shape* is defined
     by the full-opacity border (see [data-theme="light"] override below),
     so a barely-there fill is fine; the dark text reads sharply against
     near-white. */
  --accent-soft:  color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-ring:  color-mix(in srgb, var(--accent) 26%, transparent);
  --accent-dim:   color-mix(in srgb, var(--accent) 22%, transparent);
  --accent-glow:  color-mix(in srgb, var(--accent) 14%, transparent);

  /* Light-theme remap of the active logo backdrop. */
  --logo-backdrop: var(--logo-backdrop-light);

  /* Status palette — vibrant primary-leaning variants (Tailwind 700 range).
     Tuned so the solid pill fills read as their hue (vivid teal/green/etc),
     not as muted dark blocks. White text on each passes WCAG AA (4.5:1+):
     teal 5.5, green 5.0, red 6.5, blue 6.7, purple 7.0. */
  --teal:         #0f766e;
  --red:          #b91c1c;
  --blue:         #1d4ed8;
  --purple:       #7e22ce;
  --green:        #15803d;

  --teal-soft:    color-mix(in srgb, var(--teal) 14%, transparent);
  --teal-dim:     color-mix(in srgb, var(--teal) 22%, transparent);
  --red-soft:     color-mix(in srgb, var(--red) 14%, transparent);
  --red-dim:      color-mix(in srgb, var(--red) 22%, transparent);
  --blue-soft:    color-mix(in srgb, var(--blue) 13%, transparent);
  --blue-dim:     color-mix(in srgb, var(--blue) 22%, transparent);
  --purple-soft:  color-mix(in srgb, var(--purple) 14%, transparent);
  --purple-dim:   color-mix(in srgb, var(--purple) 22%, transparent);
  --green-dim:    color-mix(in srgb, var(--green) 22%, transparent);

  --shadow-sm:    0 1px 2px rgba(20, 30, 50, .07);
  --shadow:       0 4px 14px rgba(20, 30, 50, .08);
  --shadow-lg:    0 16px 44px rgba(20, 30, 50, .14);
}

html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* =====================================================================
   PILL PALETTES — three premade option-sets the admin picks from in
   Theming. Each palette defines bg + border + text per hue. All borders
   come from the Vivid (Tailwind 700) set because that band is the only
   one that passes 3:1 against BOTH slate (#0e1116) and light (#ffffff)
   surfaces — using it as the border across every palette guarantees the
   pill edge is visible regardless of the bg's intensity.
     Vivid — saturated mid-tones with white text (default, looks bold)
     Muted — deeper Tailwind-800 fills with white text (more subdued)
     Soft  — Tailwind-200 pastels with near-black text (gentle, paper-like)
   Verified with server/util/contrast.js: text-on-bg ≥4.5, border-on-each-
   surface ≥3.0 for every hue in every palette.
   ===================================================================== */

/* Default = Vivid. :root specificity wins when no [data-pill-palette]
   attribute is set, and [data-pill-palette="vivid"] re-asserts the same
   values for explicit selection. */
:root,
html[data-pill-palette="vivid"] {
  --pill-text:          #ffffff;
  --pill-teal-bg:       #0f766e; --pill-teal-border:   #0f766e;
  --pill-green-bg:      #15803d; --pill-green-border:  #15803d;
  --pill-cyan-bg:       #0e7490; --pill-cyan-border:   #0e7490;
  --pill-blue-bg:       #2563eb; --pill-blue-border:   #2563eb;
  --pill-purple-bg:     #9333ea; --pill-purple-border: #9333ea;
  --pill-pink-bg:       #db2777; --pill-pink-border:   #db2777;
  --pill-red-bg:        #dc2626; --pill-red-border:    #dc2626;
  --pill-orange-bg:     #c2410c; --pill-orange-border: #c2410c;
  --pill-gray-bg:       #6b7280; --pill-gray-border:   #6b7280;
}
html[data-pill-palette="muted"] {
  --pill-text:          #ffffff;
  --pill-teal-bg:       #115e59; --pill-teal-border:   #0f766e;
  --pill-green-bg:      #166534; --pill-green-border:  #15803d;
  --pill-cyan-bg:       #155e75; --pill-cyan-border:   #0e7490;
  --pill-blue-bg:       #1e40af; --pill-blue-border:   #2563eb;
  --pill-purple-bg:     #6b21a8; --pill-purple-border: #9333ea;
  --pill-pink-bg:       #9d174d; --pill-pink-border:   #db2777;
  --pill-red-bg:        #991b1b; --pill-red-border:    #dc2626;
  --pill-orange-bg:     #9a3412; --pill-orange-border: #c2410c;
  --pill-gray-bg:       #4b5563; --pill-gray-border:   #6b7280;
}
html[data-pill-palette="soft"] {
  --pill-text:          #1a1f2c;
  --pill-teal-bg:       #99f6e4; --pill-teal-border:   #0f766e;
  --pill-green-bg:      #bbf7d0; --pill-green-border:  #15803d;
  --pill-cyan-bg:       #a5f3fc; --pill-cyan-border:   #0e7490;
  --pill-blue-bg:       #bfdbfe; --pill-blue-border:   #2563eb;
  --pill-purple-bg:     #e9d5ff; --pill-purple-border: #9333ea;
  --pill-pink-bg:       #fbcfe8; --pill-pink-border:   #db2777;
  --pill-red-bg:        #fecaca; --pill-red-border:    #dc2626;
  --pill-orange-bg:     #fed7aa; --pill-orange-border: #c2410c;
  --pill-gray-bg:       #d1d5db; --pill-gray-border:   #6b7280;
}

/* ---------------------------------------------------------------------
   LIGHT-THEME TEXT-ON-TINT OVERRIDES
   The customer's --accent is also used as TEXT on a 13% accent-soft
   tint (in .status-tag.checked-out, .filter-chip.active, etc.). On
   light theme a mid-tone accent like #b76b00 hits only ~3.4:1 there —
   below AA-text. Derive a darker version via color-mix() for those
   text usages only; the accent itself (used as fill) stays at the
   customer's chosen color so brand identity is preserved.
   --------------------------------------------------------------------- */
/* ---------------------------------------------------------------------
   PILL STYLING NOTE
   The static pill rules now live in gv.css and apply to BOTH themes —
   solid colored bg + white text + matching border. The dynamic style
   element (window.applyDynamicBadgeColors in index.html) emits
   !important rules per admin-customized condition/status hex; those
   override the gv.css defaults so admin colors win. No theme-specific
   overrides needed here.

   Inline accent text usages that aren't pills (active filter chips,
   active tabs, today's calendar number, etc) still get the dark-color
   text override on light theme because they're text on a light surface,
   not solid chips. */
html[data-theme="light"] .filter-chip.active,
html[data-theme="light"] .tab.active,
html[data-theme="light"] .nav-item.active,
html[data-theme="light"] .cal-day.today .d,
html[data-theme="light"] .cal-day.selected .d,
html[data-theme="light"] thead th.active,
html[data-theme="light"] thead th.active .sort-chev {
  color: color-mix(in srgb, var(--accent), black 28%);
}
