/* Shared design tokens for the dashboard shell + marketing pages.
   Extracted from the 7 pages that used to carry a verbatim copy of this
   :root block (lead-gen.html, lead-gen-new.html, api-keys.html,
   dashboard.html, create.html, index.html, pricing.html) — see
   docs/design/leadgen-parity-spec.md PART 2 / caution 4.

   LIGHT is the default theme (":root" below) and is byte-identical in
   value to what every page used to declare inline — this file is a pure
   refactor for light mode, nothing should render differently.

   `body.dark` adds the reference product's dark+lime skin. Only the
   dashboard-shell pages (lead-gen.html, lead-gen-new.html, api-keys.html,
   dashboard.html) actually expose the toggle that adds `.dark` to <body>;
   the marketing pages (index/pricing/create) share these tokens for the
   light values only and never flip the class. */

/* The `hidden` attribute must actually hide (2026-09-21 QA sweep).
   The UA stylesheet's `[hidden] { display: none }` has the SAME specificity
   as any plain class rule, so an author rule that sets `display` on the same
   element silently wins and the element stays on screen even though its
   `hidden` property reads true. Four live examples, all "hide this until it
   has something to say" markup that never hid:
     - create.html `.w-imported-chip` (display:inline-flex) — the amber
       "Imported — check these" badge showed above Service pages / Service
       areas / business hours on every visit, including a wizard where
       nothing was ever imported.
     - create.html `#f-font-row.row` (display:grid) — the Heading/Body font
       pair is supposed to be swapped OUT for the single "Font pairing"
       preset on the Ultimate look, and hidden entirely on Waterline (which
       sets its own typeface). Both showed at once; the code comment right
       above it says "never shown at the same time as f-font-row".
     - lead-gen-new.html `.file-chip` (display:inline-flex) — an empty
       accent-coloured pill sat under the CSV drop zone before any file was
       chosen.
     - agent.html `.attach-thumbs` (display:flex) — a stray 10px gap above
       the composer with no attachments.
   One shared rule here (theme.css is on all 17 dashboard-suite pages) fixes
   every one of them and stops the next one happening. `!important` is what
   makes it beat those class rules; nothing in this repo shows an element by
   setting `display` while leaving `hidden` set, so nothing else changes —
   every JS show/hide either toggles `.hidden` or sets `style.display` on an
   element that has no `hidden` attribute at all. */
[hidden] { display: none !important; }

:root {
  --w-bg: #ffffff;              /* was #f6f7f9 — glow sits on pure white */
  --w-surface: #ffffff;
  --w-ink: #0e0f1a;             /* near-black, faint indigo bias */
  --w-body: #3b3d4d;
  --w-muted: #5c5f6e;
  --w-accent: #6366f1;          /* indigo-500 (was #1f3e90) */
  --w-accent-ink: #ffffff;
  --w-accent-soft: #eef2ff;     /* indigo-50 tint */
  /* Whole-row hover background for list/table rows (premium-sites-table,
     2026-09-06): same subtle indigo tint as --w-accent-soft (nav-item.active,
     footer-item:hover, w-btn-ghost:hover already use it) so a row-hover reads
     as ONE flat wash, not a third color -- two-color rule stays intact. Named
     separately so a future "hover" tweak doesn't also change the nav/button
     tint by accident. */
  --w-surface-hover: var(--w-accent-soft);
  --w-border: rgba(14, 15, 26, 0.10);
  --w-danger: #b42318;
  --w-warn: #92400e;
  --w-radius: 12px;
  --w-radius-sm: 8px;
  --w-shadow: 0 1px 2px rgba(30, 27, 75, 0.05), 0 18px 40px -22px rgba(30, 27, 75, 0.20);
  --w-font: "Avenir Next", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --sidebar-w: 240px;

  /* the approved hero background + a lighter variant for section tops */
  --w-glow: radial-gradient(125% 125% at 50% -50%, #c7d2fe 40%, transparent 100%);
  --w-glow-soft: radial-gradient(120% 120% at 50% -40%, #e0e7ff 0%, transparent 70%);

  --w-accent-tint: #e0e7ff;                /* hover/selected (indigo-100) */
  --w-pill-neutral-bg: var(--w-border);
  --w-pill-neutral-ink: var(--w-muted);
  --w-status-completed-bg: #e6f6ec;
  --w-status-completed-ink: #15803d;
  --w-status-processing-bg: #fef3e0;
  --w-status-processing-ink: #b45309;
  --w-status-failed-bg: #fde8e6;
  --w-status-failed-ink: var(--w-danger);
  --w-upsell-grad: linear-gradient(135deg, #6366f1, #4f46e5);   /* was #1f3e90 → #16296b */
  --w-sparkline: currentColor;

  /* ---------- calm status colors (2026-09-05, feat/calm-status-colors) ----------
     Two-color rule (Hannah, live-review of #359): --w-accent stays the one
     primary (nav/links/primary buttons); --w-accent-2 is the ONLY secondary,
     used exclusively for the Add Hosting button fill, the "live"/"created"/
     "requested" success dots, and the filled tiles on the stat-card status
     strip -- nowhere else. Every dot/pill that used to be green now reads
     this token instead; no other green remains in the dashboard/site pages.
     --w-dot-busy/--w-dot-off both resolve to --w-muted on purpose: a
     building row and a failed row are both "calm gray", never red (builds
     must always ship -- a failed build isn't an alarm). */
  --w-accent-2: #F5B84A;         /* warm amber, Hannah's pick over the first lime draft */
  --w-accent-2-ink: #1A1A1A;     /* readable text on the accent-2 fill, light + dark alike */
  --w-dot-live: var(--w-accent-2);
  --w-dot-busy: var(--w-muted);
  --w-dot-off: var(--w-muted);
}

/* ---------- dark theme (reference dark+lime skin) ---------- */
/* Keyed off body.dark (the toggle's runtime target) and html.dark (set by
   the pre-paint inline script in <head>, before <body> exists yet, so the
   saved preference applies before first paint with no flash). */
body.dark, html.dark {
  --w-bg: #0d0f0d;
  --w-surface: #16181a;
  --w-ink: #f3f5f0;
  --w-body: #d4d8d0;
  --w-muted: #8a8f88;
  --w-accent: #a5b4fc;
  --w-accent-ink: #10121f;
  --w-accent-soft: rgba(165, 180, 252, 0.16);
  --w-surface-hover: var(--w-accent-soft);
  --w-border: rgba(243, 245, 240, 0.1);
  --w-danger: #ff6b6b;
  --w-warn: #f2b84b;
  --w-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45);

  /* Dark-specific semantics: accent tint (hover/selected) stays indigo;
     the "neutral pill" (pending/queued) family must stay grey, NOT indigo. */
  --w-accent-tint: rgba(165, 180, 252, 0.16);
  --w-pill-neutral-bg: rgba(243, 245, 240, 0.1);
  --w-pill-neutral-ink: #a7ac9f;
  --w-status-completed-bg: rgba(34, 197, 94, 0.16);
  --w-status-completed-ink: #4ade80;
  --w-status-processing-bg: rgba(242, 184, 75, 0.16);
  --w-status-processing-ink: #f2b84b;
  --w-status-failed-bg: rgba(255, 107, 107, 0.16);
  --w-status-failed-ink: #ff6b6b;
  --w-upsell-grad: linear-gradient(135deg, #4f46e5, #312e81);
  --w-sparkline: #a5b4fc;

  /* calm status colors, dark -- see the :root block above for what each
     token is for; only the amber hue shifts for dark contrast. */
  --w-accent-2: #FBBF24;
  --w-accent-2-ink: #1A1A1A;
  --w-dot-live: var(--w-accent-2);
  --w-dot-busy: var(--w-muted);
  --w-dot-off: var(--w-muted);

  /* Dark-appropriate glow to match light mode's indigo */
  --w-glow: radial-gradient(125% 125% at 50% -50%, rgba(99, 102, 241, 0.18) 40%, transparent 100%);
  --w-glow-soft: radial-gradient(120% 120% at 50% -40%, rgba(99, 102, 241, 0.12) 0%, transparent 70%);
}

/* ---------- brand accent survives dark mode (2026-09-14 audit item 1) ----------
   brand.js stamps html[data-brand="ruufpro"] for a RuufPro (calc-source)
   account. Its inline --w-accent on <html> only won in light mode: the
   `body.dark` block above redeclares --w-accent on <body>, which is closer to
   everything it paints, so a RuufPro roofer in dark mode saw ShowFirst indigo
   on every button and link. These selectors are more specific than the plain
   `body.dark` / `html.dark` above, so the orange wins back.

   Dark only -- light mode keeps exactly the tokens it has today (the inline
   style already handles it there), so nothing about the approved light look
   moves. Two-color rule intact: this only re-points the ONE primary accent at
   RuufPro's orange; --w-accent-2 (warm amber) is untouched. */
html[data-brand="ruufpro"] body.dark,
html[data-brand="ruufpro"].dark {
  --w-accent: #E08B2E;
  --w-accent-soft: rgba(224, 139, 46, 0.16);
  --w-accent-tint: rgba(224, 139, 46, 0.16);
  --w-surface-hover: rgba(224, 139, 46, 0.16);
  --w-sparkline: #E08B2E;
  --w-upsell-grad: linear-gradient(135deg, #E08B2E, #a8641d);
  --w-glow: radial-gradient(125% 125% at 50% -50%, rgba(224, 139, 46, 0.18) 40%, transparent 100%);
  --w-glow-soft: radial-gradient(120% 120% at 50% -40%, rgba(224, 139, 46, 0.12) 0%, transparent 70%);
}

/* Aquí Mismo (2026-10-01, third brand): same mechanism. Its accent is
   #2f6f4e; in dark mode the same green is lifted to #5aa47c so links and
   buttons stay readable on the dark surface. Light mode uses the inline
   #2f6f4e brand.js sets. */
html[data-brand="aquimismo"] body.dark,
html[data-brand="aquimismo"].dark {
  --w-accent: #5aa47c;
  --w-accent-soft: rgba(90, 164, 124, 0.16);
  --w-accent-tint: rgba(90, 164, 124, 0.16);
  --w-surface-hover: rgba(90, 164, 124, 0.16);
  --w-sparkline: #5aa47c;
  --w-upsell-grad: linear-gradient(135deg, #5aa47c, #2f6f4e);
  --w-glow: radial-gradient(125% 125% at 50% -50%, rgba(90, 164, 124, 0.18) 40%, transparent 100%);
  --w-glow-soft: radial-gradient(120% 120% at 50% -40%, rgba(90, 164, 124, 0.12) 0%, transparent 70%);
}

/* ---------- ruufpro brand hides the agency-only nav items (2026-09-16) ----------
   Lead Gen / Find Leads / Campaigns are ShowFirst's agency-facing surfaces --
   a RuufPro (calc-source) account never has them. Until now this was done
   only in JS (scope.js's trimSidebar(), after an async session round-trip
   confirms session.source === "calc"), which: (a) flashes the full agency
   sidebar for a beat on every load, and (b) never ran at all on admin.html,
   which doesn't include scope.js -- so a signed-out visitor to
   my.ruufpro.com/admin saw the three items with no hiding, ever.

   brand.js now stamps html[data-brand="ruufpro"] synchronously from the
   HOSTNAME alone (my.ruufpro.com / calc.ruufpro.com), before paint and
   without needing a session -- so this CSS rule can hide the three items
   unconditionally and instantly, everywhere the sidebar markup appears
   (including admin.html). Harmless where scope.js's JS hide already runs
   for a signed-in calc session -- same end state, just earlier and with no
   flash. sitefirst.app is untouched: data-brand is only ever "ruufpro" there
   for a genuine calc/ruufpro session, exactly as before. */
html[data-brand="ruufpro"] .sidebar-nav a[href="/lead-gen.html"],
html[data-brand="ruufpro"] .sidebar-nav a[href="/search.html"],
html[data-brand="ruufpro"] .sidebar-nav a[href="/campaigns.html"] {
  display: none !important;
}

/* Dark mode: form controls without explicit backgrounds fall back to the browser's
   white default -- give all controls surface/ink so none escape the theme. */
body.dark input, body.dark textarea, body.dark select,
html.dark input, html.dark textarea, html.dark select {
  background: var(--w-surface);
  color: var(--w-ink);
}
body.dark input::placeholder, body.dark textarea::placeholder,
html.dark input::placeholder, html.dark textarea::placeholder {
  color: var(--w-muted);
}

/* Dark mode: native <input type=time> renders its clock-icon indicator in a
   fixed dark color regardless of page theme, so on our dark surfaces it's
   dark-on-dark and invisible. `color-scheme: dark` tells the browser to draw
   its own form-control chrome (icon + dropdown) in a theme matching this
   surface, which is the correct fix (vs. a CSS filter, which risks a
   double-invert if the browser ever ships a dark-aware icon itself). Scoped
   to dark mode only so light mode's icon is untouched. */
body.dark input[type=time], html.dark input[type=time] {
  color-scheme: dark;
}

/* Dark mode: default white scrollbar tracks glare against dark surfaces. */
body.dark, html.dark, body.dark *, html.dark * {
  scrollbar-color: rgba(243, 245, 240, 0.25) transparent;
}
body.dark ::-webkit-scrollbar, html.dark ::-webkit-scrollbar { width: 10px; height: 10px; }
body.dark ::-webkit-scrollbar-track, html.dark ::-webkit-scrollbar-track { background: transparent; }
body.dark ::-webkit-scrollbar-thumb, html.dark ::-webkit-scrollbar-thumb {
  background: rgba(243, 245, 240, 0.25);
  border-radius: 5px;
}