/* ============================================================================
 * Vernier Global Design Tokens — v8.0.0 unification layer
 *
 * Loaded on EVERY page (marketing + portal) so the visual language from
 * docs/plans/workflow-v2-master-plan.md applies uniformly:
 *
 *   - Typography: Inter + JetBrains Mono (already swapped in HTML/CSS)
 *   - Color: Two palettes (light + dark) + Bidding Hours (8pm–6am local)
 *     auto-engages via prefers-color-scheme + JS-applied .bidding-hours class
 *   - Spacing: 4px baseline grid (utility classes + var scale)
 *   - Motion: Spring physics — --motion-spring-snap (~120ms),
 *     --motion-spring-default (~180ms), --motion-spring-gentle (~280ms)
 *   - Density: Two modes (compact 32px / comfortable 44px) toggled via
 *     body.density-compact / body.density-comfortable
 *   - tabular-nums + JetBrains Mono on every numeric/money cell
 *
 * Applied via :root so it cascades into v1 marketing pages (which use
 * --cyan, --bg, --text-bright in their inline styles) AND v2 portal
 * surfaces. Per-page <style> blocks still win for layout-specific rules
 * (correct), but anywhere they reference --cyan they get the unified
 * brand value.
 *
 * Loaded BEFORE any per-page <style> blocks so the cascade works.
 * Authored 2026-05-01 as part of the v8.0.0 styling unification.
 * ========================================================================= */

:root {
  /* ── Brand & accent (single source of truth) ──────────────────────── */
  --cyan:               #3B82F6;
  --cyan-hover:         #60A5FA;
  --cyan-pressed:       #2563EB;
  --cyan-soft:          rgba(59, 130, 246, 0.10);

  /* Semantic colors */
  --green:              #22C55E;
  --gold:               #F59E0B;
  --yellow:             #F59E0B;
  --red:                #EF4444;
  --blue:               #3B82F6;

  /* Warm accent — field-tactile actions, highlights */
  --safety-orange:      #F97316;
  --safety-orange-dim:  rgba(249, 115, 22, 0.10);
  --safety-orange-glow: rgba(249, 115, 22, 0.20);

  /* ── Surface palette (dark mode default — estimators bid at night) ── */
  --bg:                 #0F1219;
  --bg2:                #131720;
  --bg3:                #161B24;
  --bg4:                #1C222D;
  --bg-card:            #161B24;
  --bg-canvas:          #0B0E14;
  --bg-surface:         #11151D;
  --bg-surface-raised:  #171C26;
  --bg-surface-sunken:  #0A0D13;

  /* Borders */
  --border:             rgba(148, 163, 184, 0.12);
  --border-strong:      rgba(148, 163, 184, 0.22);
  --border-cyan:        rgba(59, 130, 246, 0.25);

  /* Text */
  --text-bright:        #E2E8F0;
  --text-mid:           #94A3B8;
  --text-dim:           #64748B;
  --text-tertiary:      #5E6B7E;

  /* Elevation */
  --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.20);
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:    0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.40);
  --shadow-xl:    0 24px 64px rgba(0, 0, 0, 0.56);

  /* Glow effects */
  --glow-sm:      0 0 8px rgba(59, 130, 246, 0.08);
  --glow-md:      0 0 16px rgba(59, 130, 246, 0.12);

  /* ── Spacing — 4px baseline grid (4/8/12/16/20/24/32/48/64) ──────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* Radii */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ── Motion — spring physics, anchored on user actions ──────────── */
  --motion-spring-snap:     120ms cubic-bezier(0.32, 0.72, 0, 1);
  --motion-spring-default:  180ms cubic-bezier(0.32, 0.72, 0, 1);
  --motion-spring-gentle:   280ms cubic-bezier(0.32, 0.72, 0, 1);
  --motion-spring-emphasis: 480ms cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out:               cubic-bezier(0.23, 1, 0.32, 1);
  --ease-spring:            cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Typography ──────────────────────────────────────────────────── */
  --font-body:    'Inter', -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-numeric: 'JetBrains Mono', ui-monospace, "Fira Code", Menlo, monospace;

  /* ── Density (compact = 32px row, comfortable = 44px row) ────────── */
  --row-h-compact:     32px;
  --row-h-comfortable: 44px;
  --row-h:             var(--row-h-comfortable); /* default */
}

body.density-compact { --row-h: var(--row-h-compact); }
body.density-comfortable { --row-h: var(--row-h-comfortable); }

/* ── Light mode (mandatory for owner meetings, daylight site offices) ── */
body.theme-light,
body.workflow-v2.theme-light {
  --bg:                 #FAFBFC;
  --bg2:                #FFFFFF;
  --bg3:                #F1F4F9;
  --bg4:                #E2E8F0;
  --bg-card:            #FFFFFF;
  --bg-canvas:          #FAFBFC;
  --bg-surface:         #FFFFFF;
  --bg-surface-raised:  #FFFFFF;
  --bg-surface-sunken:  #F1F4F9;
  --border:             rgba(15, 23, 42, 0.08);
  --border-strong:      rgba(15, 23, 42, 0.18);
  --text-bright:        #0F172A;
  --text-mid:           #475569;
  --text-dim:           #64748B;
  --text-tertiary:      #94A3B8;
  /* Softer daylight accent — less saturated than #1D4ED8 on white */
  --cyan:               #4D6B94;
  --cyan-hover:         #5F7FA8;
  --cyan-pressed:       #3D5677;
  --cyan-soft:          rgba(77, 107, 148, 0.14);
  --blue:               #4D6B94;
  --border-cyan:        rgba(77, 107, 148, 0.28);
  --green:              #15803D;
  --gold:               #B45309;
  --red:                #B91C1C;
  --shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-md:      0 4px 12px rgba(15, 23, 42, 0.10);
  --shadow-lg:      0 12px 32px rgba(15, 23, 42, 0.14);
  --shadow-xl:      0 24px 64px rgba(15, 23, 42, 0.18);

  /* Mirror the v2-specific tokens so v2 surfaces (project view inputs,
     settings forms, etc.) read the light values via their --v2-* names.
     Without this, an <input> styled with background:var(--v2-surface-sunken)
     stays dark on a light page, making forms unreadable. */
  --v2-canvas:          #FAFBFC;
  --v2-surface:         #FFFFFF;
  --v2-surface-raised:  #FFFFFF;
  --v2-surface-sunken:  #F1F4F9;
  --v2-border-subtle:   rgba(15, 23, 42, 0.08);
  --v2-border-strong:   rgba(15, 23, 42, 0.18);
  --v2-text-primary:    #0F172A;
  --v2-text-secondary:  #475569;
  --v2-text-tertiary:   #94A3B8;
  --v2-accent:          #4D6B94;
  --v2-accent-hover:    #5F7FA8;
  --v2-accent-pressed:  #3D5677;
  --v2-accent-soft:     rgba(77, 107, 148, 0.10);
  --v2-success:         #15803D;
  --v2-warning:         #B45309;
  --v2-error:           #B91C1C;
  --v2-info:            #4D6B94;
}

/* ── Bidding Hours (8pm–6am local — applied via JS — warm tones) ────── */
body.theme-bidding-hours,
body.workflow-v2.theme-bidding-hours {
  --bg:                 #0F0E14;
  --bg2:                #181620;
  --bg3:                #221F2E;
  --bg-card:            #181620;
  --bg-canvas:          #0F0E14;
  --bg-surface:         #181620;
  --bg-surface-raised:  #221F2E;
  --bg-surface-sunken:  #0A090F;
  --text-bright:        #F2EBDA;     /* warmer cream — less blue */
  --text-mid:           #C4B89F;
  --text-dim:           #8A8270;
  --text-tertiary:      #6B6452;
  --cyan:               #9DBFFF;     /* desaturated, pulled toward warm */
  --cyan-hover:         #B5CFFF;
  --cyan-pressed:       #7DA8F0;
  --cyan-soft:          rgba(157, 191, 255, 0.10);

  /* Mirror v2 tokens so warm-shifted Bidding Hours flows into v2 surfaces */
  --v2-canvas:          #0F0E14;
  --v2-surface:         #181620;
  --v2-surface-raised:  #221F2E;
  --v2-surface-sunken:  #0A090F;
  --v2-text-primary:    #F2EBDA;
  --v2-text-secondary:  #C4B89F;
  --v2-text-tertiary:   #6B6452;
  --v2-accent:          #9DBFFF;
  --v2-accent-hover:    #B5CFFF;
  --v2-accent-pressed:  #7DA8F0;
  --v2-accent-soft:     rgba(157, 191, 255, 0.10);
}

/* ── Global typography ──────────────────────────────────────────────── */
html, body {
  font-family: var(--font-body);
  font-feature-settings: "cv11", "ss01", "ss03"; /* Inter polish */
}

/* tabular-nums everywhere money lives */
.money, .qty, .cell-numeric, [data-numeric],
.v2-money, .v2-qty, .v2-cell-numeric {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
}

/* ── Reduced motion preference ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ── Spacing utility classes (4px grid) ─────────────────────────────── */
.sp-1 { padding: var(--sp-1) }   .sp-2 { padding: var(--sp-2) }
.sp-3 { padding: var(--sp-3) }   .sp-4 { padding: var(--sp-4) }
.sp-5 { padding: var(--sp-5) }   .sp-6 { padding: var(--sp-6) }
.sp-8 { padding: var(--sp-8) }   .sp-12 { padding: var(--sp-12) }
.gap-1 { gap: var(--sp-1) }      .gap-2 { gap: var(--sp-2) }
.gap-3 { gap: var(--sp-3) }      .gap-4 { gap: var(--sp-4) }
.gap-6 { gap: var(--sp-6) }      .gap-8 { gap: var(--sp-8) }

/* ── Motion utility classes ─────────────────────────────────────────── */
.motion-snap     { transition: all var(--motion-spring-snap) }
.motion-default  { transition: all var(--motion-spring-default) }
.motion-gentle   { transition: all var(--motion-spring-gentle) }

/* Smooth focus rings */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  transition: outline-offset var(--motion-spring-snap);
}

/* Form inputs: ensure inputs/selects/textarea have visible borders +
   readable text in BOTH dark and light themes. v2 surfaces hardcode
   var(--v2-surface-sunken) for input bg + var(--v2-text-primary) for
   text, which now flow through both palettes. This rule adds a
   defensive baseline for v1 inputs that don't yet use v2 tokens. */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=submit]):not([type=button]),
textarea, select {
  color: inherit;
}
body.theme-light input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]):not([type=submit]):not([type=button]),
body.theme-light textarea, body.theme-light select {
  background: #FFFFFF;
  color: #0F172A;
  border-color: rgba(15, 23, 42, 0.18);
}

/* Light-mode shadow softening: dark-mode shadows like
   `box-shadow: 0 12px 32px rgba(0,0,0,0.40)` look harsh on white. Many
   v2 modules hardcode these because they were authored assuming dark
   surfaces. This rule swaps any element with such a shadow to a
   light-appropriate variant when light theme is active. We can't
   override the inline-style box-shadow value directly, but we CAN
   override it via :where() / specificity for elements that have a
   recognizable v2 class or the standard buttons. */
body.theme-light button,
body.theme-light .v2-btn,
body.theme-light .v2-card,
body.theme-light .v2-pill,
body.theme-light [id^="v2-"] {
  box-shadow: var(--shadow-sm) !important;
}
/* Floating overlays + drawers + palette get the medium variant so they
   visually separate from the page without dominating it. */
body.theme-light #v2-palette,
body.theme-light #v2-prov-drawer,
body.theme-light #v2-cp-drawer,
body.theme-light #v2-compile-drawer,
body.theme-light #v2-banner,
body.theme-light .v2-palette {
  box-shadow: var(--shadow-md) !important;
}
/* Inline button rendering with hardcoded white text on accent: the accent
   value flips to a darker blue in light mode (--cyan: #1D4ED8), so white
   text stays readable. But buttons using only color:#fff with no bg
   declaration become invisible. Ensure they have a visible bg. */
body.theme-light button[style*="color:#fff"]:not([style*="background:var(--v2-accent"]):not([style*="background:#3B82F6"]):not([style*="background:rgb"]) {
  background: var(--cyan) !important;
}

/* ── Light-mode catch-all: marketing pages hardcode color:#fff in dozens
   of CSS class selectors (.nav-logo, .card-title, .flow-t, .mob-link,
   .feature-title, .hero-title, etc). Sweeping every page individually
   would require touching 99 files. Instead, override at the cascade level:
   in light mode, ANY element whose computed color is white-ish gets
   bumped to the bright text color. We can't query computed-style in CSS,
   but we CAN target the most-common selector patterns. */

body.theme-light .nav-logo,
body.theme-light .mob-link,
body.theme-light .card-title,
body.theme-light .flow-t,
body.theme-light .demo-play,
body.theme-light .demo,
body.theme-light .topbar-title,
body.theme-light .topbar-btn,
body.theme-light .section-eyebrow,
body.theme-light .section-heading,
body.theme-light .hero-title,
body.theme-light .hero-subtitle,
body.theme-light .feature-title,
body.theme-light .feature-card h3,
body.theme-light .feature-card h4,
body.theme-light h1, body.theme-light h2,
body.theme-light .page-title,
body.theme-light .pkg-name,
body.theme-light .v2-h1, body.theme-light .v2-h2, body.theme-light .v2-h3,
body.theme-light .v2-display,
body.theme-light .v2-body, body.theme-light .v2-body-sm,
body.theme-light p, body.theme-light li, body.theme-light dd, body.theme-light dt {
  color: var(--text-bright);
}

/* ── Topbar / sidebar / surface chrome that uses the v1 'background:#000'
   or 'background:var(--bg)' / 'var(--bg2)' / 'var(--bg3)' tokens: those
   already flip via :root mirroring. But many pages use `background:#0F1219`
   directly (the literal old --bg value). Override those at the body
   level so the page chrome flips with the theme. */
body.theme-light [style*="background:#0F1219"],
body.theme-light [style*="background:#131720"],
body.theme-light [style*="background:#161B24"],
body.theme-light [style*="background:#1C222D"],
body.theme-light [style*="background:#0B0E14"],
body.theme-light [style*="background:#11151D"],
body.theme-light [style*="background:#171C26"] {
  background: var(--bg-surface) !important;
  color: var(--text-bright) !important;
}

/* Topbar / nav specifically — these stayed dark on light per Randy's report */
body.theme-light .topbar,
body.theme-light .top-bar,
body.theme-light header.nav,
body.theme-light nav.main-nav,
body.theme-light .v2-topbar,
body.theme-light .v2-sidebar,
body.theme-light #v2-pv-tabs,
body.theme-light #v2-pv-inspector,
body.theme-light #v2-settings-nav,
body.theme-light #v2-shell-sidebar {
  background: var(--bg-surface) !important;
  color: var(--text-bright) !important;
  border-color: var(--border) !important;
}

/* Also ensure section/eyebrow labels and dim-text helpers flip */
body.theme-light .text-mid,
body.theme-light .text-dim,
body.theme-light [style*="color:#94A3B8"],
body.theme-light [style*="color:#64748B"] {
  color: var(--text-mid);
}

/* Inline table headers that hardcode #fff on headers whose background
   flips to light gray in theme-light (e.g. index comparison grid). */
body.theme-light th[style*="color:#fff"],
body.theme-light th[style*="color: #fff"],
body.theme-light th[style*="color:#FFF"] {
  color: var(--text-bright) !important;
}

/* Dark-glass chips on video/demo tiles — keep light ink; var(--text-bright)
   becomes slate in theme-light (unreadable on rgba(15,18,25,.88)). */
body.theme-light .demo-play {
  color: #F8FAFC !important;
}

/* Mobile sticky dual-CTA bars use near-black #0B0F16 in per-page CSS;
   flip to light chrome + readable text. */
@media (max-width: 900px) {
  body.theme-light .sticky-cta {
    background: var(--bg2) !important;
    border-top-color: var(--border) !important;
  }
  body.theme-light .sticky-cta .demo {
    background: rgba(15, 23, 42, 0.06) !important;
    color: var(--text-bright) !important;
  }
  body.theme-light .sticky-cta .beta {
    background: #B9CDE8 !important;
    color: #0F172A !important;
    border: 1px solid rgba(15, 23, 42, 0.1) !important;
  }
}

/* Marketing landings: solid “electric” blue fills — soften for daylight
   (powder fill + ink label; hovers keep existing per-page :hover). */
body.theme-light .tb-btn.solid,
body.theme-light .cta-btn.primary,
body.theme-light .nav-cta,
body.theme-light .btn-cyan,
body.theme-light .act-btn.cyan,
body.theme-light .tb-btn.cyan,
body.theme-light .add-btn {
  background: #B9CDE8 !important;
  color: #0F172A !important;
  border-color: rgba(15, 23, 42, 0.1) !important;
}
body.theme-light .tb-btn.solid:hover,
body.theme-light .cta-btn.primary:hover,
body.theme-light .nav-cta:hover,
body.theme-light .btn-cyan:hover,
body.theme-light .act-btn.cyan:hover,
body.theme-light .tb-btn.cyan:hover,
body.theme-light .add-btn:hover {
  background: #D7E4F5 !important;
  color: #0F172A !important;
}

/* Ticker / full-bleed accent bar (index) — muted strip, black ticker type */
body.theme-light .ticker-wrap {
  background: #C4D5E8 !important;
}

/* Links and ghost buttons that only referenced electric #3B82F6 in page :root */
body.theme-light a[style*="color:#3B82F6"],
body.theme-light a[style*="color: #3B82F6"] {
  color: var(--cyan) !important;
}

/* Inline color:#fff on form controls / disclosure headers when the page
   chrome is light (index qualification selects, FAQ <summary>, bid
   cover brand field). Keeps badge/chip spans on colored pills intact. */
body.theme-light summary[style*="color:#fff"],
body.theme-light summary[style*="color: #fff"],
body.theme-light summary[style*="color:#FFF"],
body.theme-light select[style*="color:#fff"],
body.theme-light select[style*="color: #fff"],
body.theme-light select[style*="color:#FFF"],
body.theme-light textarea[style*="color:#fff"],
body.theme-light textarea[style*="color: #fff"],
body.theme-light textarea[style*="color:#FFF"] {
  color: var(--text-bright) !important;
}

body.theme-light input[style*="color:#fff"]:not([style*="background:var(--cyan"]):not([style*="background:#3B82F6"]):not([style*="background:rgb(59,130,246"]):not([style*="background:rgb(59, 130, 246"]) {
  color: var(--text-bright) !important;
}

/* ── Base button reset to use unified motion + radius ───────────────── */
button, .btn {
  transition: background var(--motion-spring-snap),
              border-color var(--motion-spring-snap),
              transform var(--motion-spring-snap),
              box-shadow var(--motion-spring-snap);
}

/* Scrollbar — match dark surface palette site-wide */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-surface-sunken); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }