/* ============================================================================
   NWC Design Tokens — the single source of truth for the app's visual language.

   PRINCIPLES
   ----------
   1. Every color, spacing value, radius, shadow, and z-index in the app
      should reference a token here. Hardcoded values in component CSS are
      a smell — promote to a token if it's reused, replace with the closest
      token if it's a near-miss.

   2. Tokens are semantic where it matters (--surface-default,
      --text-primary) and primitive where semantics don't add clarity
      (--space-md, --radius-sm). When in doubt, semantic.

   3. Aligned with Bootstrap's variable names where they overlap, so any
      remaining Bootstrap utility classes blend rather than conflict.

   4. Dark mode is a separate handoff — but every token here is structured
      so dark-mode override is a [data-theme="dark"] block, nothing else.

   5. NO HARDCODED COLORS IN THIS FILE. The hex values here are the SOURCE.
      Everywhere else, use var(--token-name).
   ============================================================================ */

:root {
  /* ── Color primitives — the raw palette ────────────────────────────── */
  /* Grays (aligned to Bootstrap gray scale) */
  --gray-50:   #f8f9fa;
  --gray-100:  #f1f3f5;
  --gray-200:  #e9ecef;
  --gray-300:  #dee2e6;
  --gray-400:  #ced4da;
  --gray-500:  #adb5bd;
  --gray-600:  #6c757d;
  --gray-700:  #495057;
  --gray-800:  #343a40;
  --gray-900:  #212529;

  /* Brand */
  --brand-teal-500:   #11998e;   /* Compliance table-header start, the green accent */
  --brand-teal-300:   #38ef7d;   /* Compliance table-header end */
  --brand-burgundy:   #5b2333;   /* Winemaking-forms section titles */

  /* Functional palette (Bootstrap-aligned) */
  --blue-500:    #0d6efd;
  --blue-600:    #1b6ec2;
  --blue-700:    #1861ac;
  --blue-100:    #e7f1ff;
  --green-100:   #d1e7dd;
  --green-500:   #16a34a;        /* Copilot plan-status active/complete */
  --green-700:   #155724;
  --yellow-100:  #fff3cd;
  --yellow-700:  #856404;
  --red-500:     #dc3545;
  --red-700:     #b32121;
  --orange-500:  #fd7e14;
  --white:       #ffffff;
  --black:       #000000;

  /* ── Tailwind palette primitives ───────────────────────────────────── */
  /* Added 2026-05-19 to absorb the Tailwind literals that the .razor.css
     sweep left alone. Primitives only — no dark-mode override yet (current
     behavior is literal hex in both themes; tokens preserve that exactly).
     If/when we want dark-mode behavior on these, override in the dark block. */
  --slate-50:    #f8fafc;
  --slate-100:   #f1f5f9;
  --slate-200:   #e2e8f0;
  --slate-300:   #cbd5e1;
  --slate-400:   #94a3b8;
  --slate-500:   #64748b;
  --slate-600:   #475569;
  --slate-700:   #334155;
  --slate-800:   #1e293b;
  --slate-900:   #0f172a;

  --indigo-400:  #818cf8;
  --indigo-500:  #6366f1;
  --indigo-600:  #4f46e5;

  --amber-100:   #fef3c7;
  --amber-500:   #f59e0b;
  --amber-600:   #d97706;

  --emerald-500: #10b981;       /* badge accents */
  --pink-500:    #ec4899;
  --purple-500:  #a855f7;

  /* ── Semantic surfaces ─────────────────────────────────────────────── */
  --surface-default:    var(--white);          /* Card, panel, modal background */
  --surface-subtle:     var(--gray-50);        /* Light-gray page background */
  --surface-muted:      var(--gray-100);       /* Hover/inactive backgrounds */
  --surface-emphasis:   var(--gray-200);       /* Selected row, active tab background */
  --surface-inverse:    var(--gray-900);       /* Code blocks, dark surfaces */

  /* ── Semantic text ─────────────────────────────────────────────────── */
  --text-primary:       var(--gray-900);
  --text-secondary:     var(--gray-700);
  --text-muted:         var(--gray-600);
  --text-disabled:      var(--gray-500);
  --text-on-inverse:    var(--white);
  --text-on-brand:      var(--white);
  --text-link:          #0071c1;               /* Slightly darker than blue-500 for AA contrast */

  /* ── Semantic borders ──────────────────────────────────────────────── */
  --border-default:     var(--gray-300);
  --border-subtle:      var(--gray-200);
  --border-strong:      var(--gray-400);
  --border-focus:       var(--blue-500);

  /* ── Brand & accent ────────────────────────────────────────────────── */
  --accent-primary:     var(--brand-teal-500);    /* Compliance accent, single source */
  --accent-primary-soft:rgba(17, 153, 142, 0.15); /* Focus ring, subtle backgrounds */
  --accent-gradient:    linear-gradient(135deg, var(--brand-teal-500) 0%, var(--brand-teal-300) 100%);
  --accent-burgundy:    var(--brand-burgundy);
  --accent-preview-header: linear-gradient(135deg, #667eea 0%, #764ba2 100%); /* COLA/Label preview panel header */
  /* TTB Registry indigo accent family (periwinkle headers/borders/links). Exact-match
     light — #667eea is a distinct periwinkle (≠ --indigo-500 #6366f1); dark lifts to indigo. */
  --accent-preview:        #667eea;   /* TTB group/section borders, header labels, chain links */
  --accent-preview-strong: #4a5bd4;   /* TTB link hover */
  --accent-preview-bg:     #f8f9ff;   /* TTB FBN subsection / search-panel background */
  --accent-preview-border: #d0d5f0;   /* TTB FBN search-panel border */

  /* ── Interactive (buttons/links) ───────────────────────────────────── */
  --interactive-primary:        var(--blue-600);
  --interactive-primary-hover:  var(--blue-700);
  --interactive-primary-border: var(--blue-700);

  /* ── State (status badges, validation) ─────────────────────────────── */
  --state-success-bg:   var(--green-100);
  --state-success-fg:   var(--green-700);
  --state-warning-bg:   var(--yellow-100);
  --state-warning-fg:   var(--yellow-700);
  --state-danger-bg:    #f8d7da;
  --state-danger-fg:    var(--red-700);
  --state-info-bg:      var(--blue-100);
  --state-info-fg:      var(--blue-700);
  --state-neutral-bg:   var(--gray-200);
  --state-neutral-fg:   var(--gray-700);

  --state-valid-outline:   #26b050;
  --state-invalid-outline: var(--red-500);

  /* ── Compliance: urgency row backgrounds (full-row tints) ─────────────
     A 4-tier scale on the Filings/Contracts tables: low → --state-warning-bg
     (yellow), medium → --urgency-medium-bg (orange), high → --state-danger-bg
     (pink-red), overdue → --urgency-overdue (solid red, white text). The two
     bespoke tiers have no semantic home, so they carry exact light values. */
  --urgency-medium-bg:  #fff3e0;   /* orange tier between warning and danger */
  --urgency-overdue:    #d32f2f;   /* solid-red overdue/expired row, white text */

  /* ── Compliance: permit type-badge gradients (brand-coded affordances) ── */
  --permit-badge-purple: linear-gradient(135deg, #6f42c1 0%, #9b59b6 100%);          /* ABC  */
  --permit-badge-green:  linear-gradient(135deg, #198754 0%, #2ecc71 100%);          /* CDFA */
  --permit-badge-orange: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);          /* FBN  */
  --permit-badge-red:    linear-gradient(135deg, var(--red-500) 0%, #e74c3c 100%);   /* FDA  */

  /* ── Compliance: permit trade-name chip (deep teal on pale teal) ──────
     Exact-match — #0d7a6e/#e8f5f3 are deeper/paler than --accent-primary
     (#11998e) / --accent-primary-soft (translucent), so don't reuse those. */
  --permit-tradename-bg: #e8f5f3;
  --permit-tradename-fg: #0d7a6e;

  /* ── Spacing scale ─────────────────────────────────────────────────── */
  --space-3xs:  0.125rem;  /*  2px */
  --space-2xs:  0.25rem;   /*  4px */
  --space-xs:   0.375rem;  /*  6px */
  --space-sm:   0.5rem;    /*  8px */
  --space-md:   0.75rem;   /* 12px */
  --space-lg:   1rem;      /* 16px */
  --space-xl:   1.5rem;    /* 24px */
  --space-2xl:  2rem;      /* 32px */
  --space-3xl:  3rem;      /* 48px */

  /* ── Border radii ──────────────────────────────────────────────────── */
  --radius-xs:  3px;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  8px;
  --radius-xl:  12px;
  --radius-pill: 999px;

  /* ── Shadows ───────────────────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-xl:    0 5px 15px rgba(0, 0, 0, 0.30);   /* custom-panel-container */
  --shadow-focus: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  --shadow-focus-accent: 0 0 0 3px var(--accent-primary-soft);

  /* ── Typography ────────────────────────────────────────────────────── */
  --font-family-body:    'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-family-mono:    'SF Mono', 'Monaco', 'Inconsolata', ui-monospace, SFMono-Regular, Menlo, monospace;

  --font-size-2xs:  0.65rem;
  --font-size-xs:   0.7rem;
  --font-size-sm:   0.75rem;
  --font-size-md:   0.85rem;
  --font-size-base: 0.9rem;
  --font-size-lg:   1rem;
  --font-size-xl:   1.1rem;
  --font-size-2xl:  1.25rem;

  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:  1.25;
  --line-height-normal: 1.5;

  /* ── Letter spacing (for uppercase eyebrow labels) ─────────────────── */
  --letter-spacing-wide:  0.03em;
  --letter-spacing-wider: 0.05em;
  --letter-spacing-widest:0.06em;

  /* ── Z-index scale (DOCUMENT WHAT BEATS WHAT) ──────────────────────── */
  /* Lower section: in-flow stacking */
  --z-base:        1;       /* sticky table headers inside content */
  --z-raised:      5;       /* sticky toolbars inside a page */
  --z-sticky:      100;     /* page-level sticky headers */
  --z-bottom-nav:  990;     /* mobile bottom tab bar — above content, below the nav drawer (998/999) + modals */
  /* Middle section: floating UI */
  --z-dropdown-backdrop: 1000; /* click-outside catcher */
  --z-error-ui:    1000;    /* blazor-error-ui */
  --z-dropdown:    1001;    /* dropdown menus (must beat backdrop) */
  --z-slot-badge:  1050;    /* admin slot indicator */
  --z-modal:       1060;    /* sliding panels and modals */
  --z-theme-toggle: 1100;   /* fixed page-level affordances (peer of .drawer-toggle) */
  /* Top section: drag-and-drop and tooltips */
  --z-drag-indicator: 9999; /* bottling drag-drop drop indicator */

  /* ── Transitions ───────────────────────────────────────────────────── */
  --transition-fast:    120ms ease;
  --transition-default: 150ms ease-out;
  --transition-slow:    180ms ease;

  /* ── App-specific component tokens ─────────────────────────────────── */
  --table-header-bg:        var(--accent-gradient);
  --table-header-fg:        var(--text-on-brand);
  --table-row-hover:        #f0faf9;            /* Tinted accent-primary at low opacity */
  --table-cell-padding-y:   var(--space-xs);
  --table-cell-padding-x:   var(--space-md);

  --panel-shadow:           var(--shadow-xl);
  --panel-radius:           var(--radius-lg);

  --tab-active-color:       var(--accent-primary);
  --tab-active-border:      var(--accent-primary);
  --tab-inactive-color:     var(--text-muted);

  --search-bar-bg:          var(--surface-subtle);
  --search-bar-border:      var(--border-subtle);
  --search-bar-radius:      var(--radius-lg);

  --form-input-focus-outline: var(--blue-500);
  --form-input-focus-offset:  2px;
  --form-input-min-height:    44px;

  --status-badge-radius:    var(--radius-sm);
  --status-badge-padding:   0.125rem 0.5rem;
  --status-badge-font-size: var(--font-size-sm);

  /* ── Bottling drag-drop accent (intentional brand color, dark-mode-stable) ── */
  --dnd-indicator-color:    #ffd700;            /* Gold — drag-drop drop indicator */
  --dnd-indicator-shadow:   0 0 4px rgba(255, 215, 0, 0.6);
  --dnd-empty-outline:      rgba(255, 215, 0, 0.35);

  /* ── Bottling schedule board ───────────────────────────────────────────
     Appointment-row gradients are differentiation colors (the DB-driven
     varietal card colors are separate inline styles, out of scope). Exact
     light values; the dark block darkens them so the row's inherited (and
     therefore auto-flipped, light) text stays legible. The blue "Other
     Appointment" gradient must stay distinctly blue = "NOT a bottling". */
  --appt-other-gradient:     linear-gradient(to right, rgba(109, 213, 250, 0.8), rgba(41, 128, 185, 0.8));
  --appt-multiday-gradient:  linear-gradient(to right, rgba(255, 193, 7, 0.85), rgba(255, 152, 0, 0.85));
  --appt-multiday-border:    #e65100;
  --appt-otherline-gradient: linear-gradient(to right, rgba(147, 112, 219, 0.8), rgba(106, 90, 205, 0.8));

  /* Skeleton-loader shimmer (transient; the shimmer animation is disabled
     under VR, so it never appears in a baseline capture). */
  --skeleton-base:      #e0e0e0;
  --skeleton-highlight: #f0f0f0;

  /* Sign-off status circles — traffic-light gradients (blue/green/yellow/red).
     Tiny icons with a white ring, no text on them, so they're dark-stable like
     --dnd-indicator-color: tokenized for hygiene, no dark override needed. */
  --signoff-info-gradient:    linear-gradient(45deg, #42a5f5, #1565c0);
  --signoff-success-gradient: linear-gradient(45deg, #81c784, #388e3c);
  --signoff-warning-gradient: linear-gradient(45deg, #ffb74d, #ff9800);
  --signoff-danger-gradient:  linear-gradient(45deg, #ef5350, #b71c1c);

  /* Work-request alert badge red — used as TEXT/BORDER (the solid white-on-red
     count pill stays a hardcoded literal, per the white-on-fill rule). */
  --wr-alert:        #e74c3c;
  --wr-alert-strong: #c0392b;

  /* Snow-dropper appointment indicator (Screw Cap +Snow snowflake icon). */
  --snow-dropper-fg: #1565c0;

  /* Calendar cell elevation + "today" highlight glow (MonthCalendar). */
  --calendar-cell-shadow: #92a1d1;
  --calendar-today-glow:  #a3bfe0;

  /* ── Work-request status badges + callouts ─────────────────────────────
     Shared by WorkRequestDetailView + WorkRequestReviewPanel; one source kills
     the byte-duplicated palette. The warning/accepted backgrounds reuse the
     existing --yellow-100 / --green-100 tokens (no bespoke bg needed). */
  --wr-status-info-bg:        #cfe2ff;
  --wr-status-info-fg:        #084298;
  --wr-status-info-border:    #9ec5fe;
  --wr-status-warning-fg:     #664d03;
  --wr-status-warning-border: #ffe69c;
  --wr-status-revision-bg:    #ffe5d0;
  --wr-status-revision-fg:    #842029;
  --wr-status-accepted-fg:    #0f5132;

  /* ── Date chip (Other Appointment panel — Material-blue chip family) ──── */
  --chip-info-bg:       #e3f2fd;
  --chip-info-border:   #90caf9;
  --chip-info-fg:       #1565c0;
  --chip-info-hover-bg: #bbdefb;
  --chip-info-hover-fg: #0d47a1;

  /* ── App-shell blue ─────────────────────────────────────────────────────
     The brand navy/blue that forms the app chrome (MainLayout/.sidebar,
     NwcAppHeader's nav drawer, NavMenu, NavButtonNavMenu, BlendingLayout's
     topbar). Split by ROLE because one color can't serve both jobs in dark:
       --app-shell-blue        FILL — gradient start stops + the UserMenu
                               avatar; white text rides it, so dark DEEPENS to
                               navy to keep that text legible.
       --app-shell-blue-bright gradient bright end; also stands in as the
                               BlendingLayout text/border accent. Its dark value
                               stays a DEEP blue (#0a52a8) on purpose — that
                               layout's surrounding surfaces aren't themed yet,
                               so a *lightened* accent would lose contrast on
                               them (graduate it to a real accent when the
                               Blending folder is themed).
     The two share the same LIGHT value but diverge in dark — don't "dedupe". */
  --app-shell-blue:        #052e76;
  --app-shell-blue-bright: #0366d6;

  /* App-shell gradients, expressed from the fill+bright pair so dark cascades
     automatically (no separate dark override needed — see the dark block).
     rgb(5,46,118) === #052e76, so the 180° gradient is pixel-identical to its
     prior literal. The 90° variant (0→100%) is BlendingLayout's topbar. */
  --app-shell-gradient:   linear-gradient(180deg, var(--app-shell-blue) 0%, var(--app-shell-blue-bright) 70%);
  --app-shell-gradient-h: linear-gradient(90deg, var(--app-shell-blue) 0%, var(--app-shell-blue-bright) 100%);

  /* MainLayout collapsed drawer-toggle hover — the toggle sits on the page bg
     (which DOES theme dark), so the glyph must lighten in dark while light
     stays the exact navy literal. Hover bg is a faint navy tint. */
  --app-shell-toggle-fg:       #052e76;
  --app-shell-toggle-hover-bg: rgba(5, 46, 118, 0.08);

  /* SecondaryLayout sidebar — a separate PURPLE identity, NOT part of the blue
     family; kept as a whole-gradient token (light = the exact prior literal). */
  --secondary-shell-gradient: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

/* ============================================================================
   DARK MODE

   Strategy: override only the PRIMITIVE color tokens. Semantic tokens
   (surface-*, text-*, border-*) reference the primitives via var() and
   inherit the dark values automatically. Component tokens
   (table-header-bg, etc.) reference the semantic tokens and likewise
   inherit.

   This means dark mode is ~30 lines of overrides instead of ~150.
   ============================================================================ */

[data-theme="dark"] {
  /* Inverted gray scale — darker numerically is now lighter visually */
  --gray-50:   #1a1d20;   /* darkest surface */
  --gray-100:  #212529;   /* page background */
  --gray-200:  #2b3035;   /* card/panel background */
  --gray-300:  #373b40;   /* borders, dividers */
  --gray-400:  #495057;   /* subtle text */
  --gray-500:  #6c757d;   /* muted text */
  --gray-600:  #adb5bd;   /* secondary text */
  --gray-700:  #ced4da;   /* primary text */
  --gray-800:  #dee2e6;   /* high-emphasis text */
  --gray-900:  #f8f9fa;   /* highest contrast */

  /* Brand stays the same chroma but slightly desaturated — teal reads
     punchy on white but garish on dark; pull a little saturation out. */
  --brand-teal-500:   #1ab2a4;   /* slightly brighter for contrast on dark */
  --brand-teal-300:   #4eef85;   /* the gradient companion stays vivid */
  --brand-burgundy:   #c47a8a;   /* dusty rose — still reads as burgundy accent on dark */

  /* Functional colors — lift the muted ones, leave the saturated ones */
  --blue-500:    #4d94ff;
  --blue-600:    #2d7fff;
  --blue-700:    #1b6ec2;
  --blue-100:    #1e3a5f;
  --green-100:   #1e3a2a;
  --green-500:   #4eef85;
  --green-700:   #4eef85;
  --yellow-100:  #3a2f0e;
  --yellow-700:  #f5d572;
  --red-500:     #ff5560;
  --red-700:     #c4424d;
  --orange-500:  #ff9a4d;
  --white:       #ffffff;       /* stays white — used for absolute high-contrast */
  --black:       #000000;

  /* Re-point semantic surfaces. Light mode points --surface-default at
     --white; on dark we want the near-black card background instead. */
  --surface-default:    var(--gray-200);
  --surface-subtle:     var(--gray-100);
  --surface-muted:      var(--gray-300);
  --surface-emphasis:   var(--gray-400);
  --surface-inverse:    var(--gray-900);   /* light surface on dark theme — for high-contrast modals if needed */

  /* Text — these flip via the gray scale, but call them out for clarity */
  --text-primary:       var(--gray-800);
  --text-secondary:     var(--gray-700);
  --text-muted:         var(--gray-600);
  --text-disabled:      var(--gray-500);
  --text-on-inverse:    var(--gray-100);
  --text-on-brand:      var(--white);
  --text-link:          #6ab7ff;            /* lighter blue for AA on dark */

  /* Borders — also flip via gray scale, called out for clarity */
  --border-default:     var(--gray-400);
  --border-subtle:      var(--gray-300);
  --border-strong:      var(--gray-500);
  --border-focus:       var(--blue-500);

  /* Shadows — opacity-based shadows look washed on dark; punch them up */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-md:    0 2px 4px rgba(0, 0, 0, 0.45);
  --shadow-lg:    0 2px 8px rgba(0, 0, 0, 0.50);
  --shadow-xl:    0 5px 20px rgba(0, 0, 0, 0.60);
  --shadow-focus: 0 0 0 0.25rem rgba(77, 148, 255, 0.30);
  --shadow-focus-accent: 0 0 0 3px rgba(26, 178, 164, 0.25);

  /* State backgrounds — light-mode #f8d7da reads jarring on dark */
  --state-danger-bg:    #3a1f23;

  /* Table row hover — the light-mode #f0faf9 (tinted teal) needs a
     dark equivalent. Dark hover is *brighter* than the row, not darker. */
  --table-row-hover:   #2e4543;

  /* Drag-and-drop gold — keep, but with stronger shadow on dark */
  --dnd-indicator-shadow: 0 0 8px rgba(255, 215, 0, 0.80);

  /* Compliance urgency row backgrounds — dark tints parallel to --state-*-bg.
     overdue stays a deep red that keeps bold white text legible on dark. */
  --urgency-medium-bg:  #3a2814;   /* dark amber, sits between #3a2f0e and #3a1f23 */
  --urgency-overdue:    #cf3a3a;

  /* Permit badge gradients — darkened ~15% so white text stays legible on dark */
  --permit-badge-purple: linear-gradient(135deg, #5e389f 0%, #834c98 100%);
  --permit-badge-green:  linear-gradient(135deg, #14724a 0%, #27ad60 100%);
  --permit-badge-orange: linear-gradient(135deg, #c46a1d 0%, #cf8410 100%);
  --permit-badge-red:    linear-gradient(135deg, #bb2d3b 0%, #c43a2e 100%);

  /* Permit trade-name chip — dark teal surface + lighter teal text */
  --permit-tradename-bg: #163029;
  --permit-tradename-fg: #4ec9b8;

  /* TTB Registry indigo accent family — lift foreground to the indigo primitives,
     bespoke deep-indigo surfaces for the FBN subsection bg/border. */
  --accent-preview:        var(--indigo-400);   /* #818cf8 */
  --accent-preview-strong: var(--indigo-500);   /* #6366f1 */
  --accent-preview-bg:     #1e2444;
  --accent-preview-border: #2d3561;

  /* Bottling schedule board — darken the appointment-row gradients so the
     row's auto-flipped (light) text reads on the dark board. Blue stays blue
     ("NOT a bottling"), amber stays amber, purple stays purple. */
  --appt-other-gradient:     linear-gradient(to right, rgba(30, 96, 145, 0.92), rgba(18, 58, 95, 0.94));
  --appt-multiday-gradient:  linear-gradient(to right, rgba(150, 112, 12, 0.92), rgba(120, 80, 10, 0.94));
  --appt-multiday-border:    #cc5a00;
  --appt-otherline-gradient: linear-gradient(to right, rgba(98, 74, 155, 0.92), rgba(72, 60, 140, 0.94));

  /* Skeleton shimmer — dark grays so the loader doesn't flash white on dark. */
  --skeleton-base:      #2b3035;
  --skeleton-highlight: #373b40;

  /* Work-request alert red — lift to a lighter red so it reads as text/border
     on dark surfaces (the count-pill fill stays its hardcoded #e74c3c). */
  --wr-alert:        #ff6b5e;
  --wr-alert-strong: #e0584d;

  /* Snow-dropper icon — lighter blue for contrast on a dark card. */
  --snow-dropper-fg: #5aa0e8;

  /* Calendar elevation + today glow — muted on dark (cell shadow subtle, the
     today highlight kept light enough to still pop around the dark cell). */
  --calendar-cell-shadow: #2c3a52;
  --calendar-today-glow:  #5a7cb0;

  /* Work-request status badges + callouts — deep tinted bg + light fg,
     parallel to the --state-* dark treatment. */
  --wr-status-info-bg:        #16335c;
  --wr-status-info-fg:        #9ec5fe;
  --wr-status-info-border:    #2d4a78;
  --wr-status-warning-fg:     #f5d572;
  --wr-status-warning-border: #5c4a1e;
  --wr-status-revision-bg:    #3a2417;
  --wr-status-revision-fg:    #f0a58a;
  --wr-status-accepted-fg:    #4eef85;

  /* Date chip — dark Material-blue */
  --chip-info-bg:       #1a2f4a;
  --chip-info-border:   #2d4a78;
  --chip-info-fg:       #5aa0e8;
  --chip-info-hover-bg: #234260;
  --chip-info-hover-fg: #8ec0f0;

  /* App-shell blue — deepen the FILL so white nav links/avatar text stay
     legible on dark; the gradients (--app-shell-gradient / -gradient-h)
     re-resolve from these primitives automatically, so they need no explicit
     dark override (this reproduces the prior #04204f→#0a52a8 dark gradient
     byte-for-byte). */
  --app-shell-blue:        #04204f;
  --app-shell-blue-bright: #0a52a8;

  /* Collapsed drawer-toggle hover — glyph lifts to an AA-legible blue on the
     dark page bg (#052e76 navy would be ~1.2 contrast, invisible); the hover
     tint becomes a faint light-blue (navy at 8% is invisible on dark). */
  --app-shell-toggle-fg:       #4d94ff;
  --app-shell-toggle-hover-bg: rgba(77, 148, 255, 0.12);

  /* SecondaryLayout purple — deepen both stops so white nav text stays legible. */
  --secondary-shell-gradient: linear-gradient(180deg, #031b46 0%, #26042e 70%);
}

/* ── Bootstrap variable shadowing ─────────────────────────────────────
   The app uses Bootstrap utility classes (.bg-light, .text-muted, .table,
   etc.) that reference Bootstrap's own --bs-* variables. Shadow them so
   utility-classed elements respect the theme. */
[data-theme="dark"] {
  --bs-body-bg:           var(--surface-subtle);
  --bs-body-color:        var(--text-primary);
  --bs-secondary-bg:      var(--surface-muted);
  --bs-tertiary-bg:       var(--surface-emphasis);
  --bs-secondary-color:   var(--text-muted);
  --bs-border-color:      var(--border-default);
  --bs-border-color-translucent: rgba(255, 255, 255, 0.15);
  --bs-light:             var(--surface-default);
  --bs-light-rgb:         43, 48, 53;   /* gray-200 in rgb */
  --bs-dark:              var(--gray-900);
  --bs-dark-rgb:          248, 249, 250;
  --bs-primary:           var(--blue-500);
  --bs-primary-rgb:       77, 148, 255;
  --bs-primary-bg-subtle: var(--blue-100);
  --bs-link-color:        var(--text-link);
  --bs-link-hover-color:  var(--blue-500);
}

/* ── Body background — the one global rule that has to be explicit
   because <body> isn't inside any component scope. Applies to both
   themes via the cascading semantic tokens. */
body {
  background-color: var(--surface-subtle);
  color: var(--text-primary);
}

/* ── Image inversion / opacity on dark ─────────────────────────────────
   Logos and screenshots designed for light backgrounds can look harsh
   on dark. No automatic invert — too risky for product photos, wine
   labels, scan previews. Mark specific elements with .no-theme-invert
   when an opt-out is needed. Empty selector registered for future use. */
[data-theme="dark"] img:not(.no-theme-invert) {
  /* placeholder — populate per-context when a specific image needs help */
}