/*
 * FINQUP THEME TOKENS
 * ===================
 * Single source of truth for every colour the UI uses. `:root` holds the light
 * palette - the exact values every stylesheet already resolved to before this
 * file existed (moved here verbatim from light-theme.css, plus names for the
 * literals that used to be scattered). `html.dark` redefines the same names for
 * dark mode. Nothing else should introduce a new surface/text/border literal:
 * reach for a token, and if none fits, add one here WITH BOTH VALUES.
 *
 * Load order: first stylesheet on every page, before Tailwind. Custom
 * properties on :root don't compete on specificity with anything, so order
 * only matters against other :root blocks defining the same names (guide.css
 * used to - it no longer does).
 *
 * The switch is the class on <html>: `light` (default, works without JS) or
 * `dark`, applied before first paint by _theme_boot.html and toggled by
 * theme.js. Persisted in localStorage.theme only - the server-side
 * preferences.json is per owner, and team members log in as the owner.
 */

:root {
  /* === BRAND COLORS === */
  --brand-green: #0D4D3B;
  --brand-green-dark: #062F27;
  --brand-teal: #4FACAB;
  --brand-green-light: #3d7c3d;

  /* === CORE COLORS (green-only) === */
  --bg-primary: #eef1ee; /* Deeper Off-White for high contrast */
  --bg-secondary: #ffffff; /* Pure white for cards */
  --bg-tertiary: #f0f5f3;
  --bg-accent: #e2ede8;

  /* === TEXT COLORS === */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-tertiary: #64748b;
  --text-muted: #94a3b8;
  --text-inverse: #ffffff;
  --text-subtle: #6b7280;   /* gray-500 captions (sidebar brand subtitle) */

  /* === BORDER COLORS === */
  --border-light: #e2ede8;
  --border-medium: #cbd5d1;
  --border-strong: #94a3a0;

  /* === SEMANTIC COLORS (all green variants) === */
  --primary: #0D4D3B;
  --primary-dark: #062F27;
  --primary-light: rgba(13, 77, 59, 0.1);

  --success: #0D4D3B;
  --success-dark: #062F27;
  --success-light: rgba(13, 77, 59, 0.08);

  --warning: #0D4D3B;
  --warning-dark: #062F27;
  --warning-light: rgba(13, 77, 59, 0.06);

  /* Danger: muted ghost green — NOT red */
  --danger: rgba(13, 77, 59, 0.55);
  --danger-dark: rgba(6, 47, 39, 0.75);
  --danger-light: rgba(13, 77, 59, 0.06);

  /* === ACCOUNTING SPECIFIC === */
  --debit-color: #4A90E2;   /* the journal grid's Dolzi column (set inline from JS) */
  --credit-color: #059669;  /* the journal grid's Pobaruva column (set inline from JS) */
  --balance-color: #4FACAB;
  --konto-color: #0D4D3B;

  /* === TYPOGRAPHY === */
  --font-primary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-secondary: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Monaco', 'Consolas', monospace;

  /* === UNIFIED SIZES === */
  --font-size-h1: 2.25rem;
  --font-size-title: 1.75rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-body: 1rem;
  --font-size-description: 0.9375rem;
  --font-size-small: 0.75rem;

  /* === SHADOWS (green-tinted) === */
  --shadow-sm: 0 1px 2px rgba(13, 77, 59, 0.04);
  --shadow-md: 0 4px 6px rgba(13, 77, 59, 0.06);
  --shadow-lg: 0 10px 15px rgba(6, 47, 39, 0.08);
  --shadow-xl: 0 20px 25px rgba(6, 47, 39, 0.1);

  /* === GLASSMORPHISM === */
  --glass-bg: linear-gradient(135deg,
      rgba(255, 255, 255, 0.01),
      rgba(200, 235, 235, 0.02),
      rgba(180, 220, 230, 0.01));
  --glass-blur: blur(6px) saturate(150%);
  --glass-border: 2px solid rgba(255, 255, 255, 0.5);
  --glass-shadow: 0 8px 32px 0 rgba(6, 47, 39, 0.15),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 0 rgba(255, 255, 255, 0.1);

  /* Enhanced glass */
  --glass-bg-enhanced: linear-gradient(135deg,
      rgba(255, 255, 255, 0.18) 0%,
      rgba(236, 249, 246, 0.15) 100%);
  --glass-blur-enhanced: blur(22px) saturate(185%);
  --glass-shadow-enhanced: 0 18px 42px -14px rgba(6, 47, 39, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* === SPACING === */
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* === BORDER RADIUS === */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;
  /* === NAMED LITERALS (light values are exactly what the rules used before) === */
  --bg-canvas: #f8fafc;                  /* main content backdrop (.signature-grid) */
  --grid-line: rgba(13, 77, 59, 0.08);   /* .signature-grid lines */
  --bg-elevated: #ffffff;                /* modals, dropdowns, popovers */
  --bg-hover: #e5e7eb;                   /* neutral hover (sidebar nav) */
  --border-card: rgba(13, 77, 59, 0.15); /* card outline (.bg-white et al.) */
  --border-default: #e5e7eb;             /* Tailwind preflight default border-color */
  --border-cool: #e2e8f0;                /* slate-200: JS-built popovers/widgets (assistant) */
  --border-cool-strong: #cbd5e1;         /* slate-300 */
  --brand-tint-1: rgba(13, 77, 59, 0.04);
  --brand-tint-2: rgba(13, 77, 59, 0.06);
  --brand-tint-3: rgba(13, 77, 59, 0.1);
  --brand-tint-4: rgba(13, 77, 59, 0.25);
  --border-glass: rgba(255, 255, 255, 0.5);  /* card/modal outline on the glass look */
  --border-glass-soft: rgba(255, 255, 255, 0.4);
  --surface-panel: rgba(255, 255, 255, 0.75);  /* frosted page sections (account) */
  --surface-panel-strong: rgba(255, 255, 255, 0.8);
  --surface-panel-hover: rgba(255, 255, 255, 0.85);
  --glass-blur-panel: blur(12px);
  --surface-modal: rgba(255, 255, 255, 0.85);     /* junior settings sheet */
  --surface-modal-input: rgba(255, 255, 255, 0.9);
  --glass-blur-modal: blur(20px) saturate(180%);
  --surface-slate-100: #F1F5F9;
  --menu-item-text: #111111;             /* JS-rendered dropdown rows (journal config menu) */
  --menu-item-active-bg: #f3f4f6;
  --menu-error-text: #b91c1c;
  --status-danger-bg-2: #FEE2E2;
  --status-danger-border: #FCA5A5;
  --status-danger-text-3: #DC2626;
  --status-ok-bg-6: #D1FAE5;
  --status-ok-border: #A7F3D0;
  --status-ok-bg-7: #dcfce7;
  --status-ok-text-5: #166534;
  --status-info-bg-3: #dbeafe;
  --status-info-bg-4: #ebf5ff;
  --status-danger-bg-3: #fef2f2;
  --status-danger-text-4: #991b1b;
  --pale-warn-8: #fde68a;
  --status-ok-text-4: #059669;
  --border-glass-faint: rgba(255, 255, 255, 0.3);
  --border-glass-faintest: rgba(255, 255, 255, 0.2);
  --dm-green-soft-fill: #e6f4ef;         /* document manager selected/soft fill */
  --dm-bg-fill: #f7f8fa;                 /* document manager page ground */
  --brand-fill: #0D4D3B;                 /* brand green as a FILL (stays dark green in both themes) */
  --text-on-brand: #ffffff;              /* text/icons on --brand-fill (stays white in both themes) */
  --dm-green-fill-hover: #062F27;

  /* === STATUS PALETTES ===
     Pastel fill + deep text, the pairing used for badges, callouts and alert
     rows (Bootstrap-era literals inherited by the travel-expenses page). Dark
     mode turns the fill into a tint of the same hue and lightens the text. */
  --status-ok-bg: #e8f5e9;
  --status-ok-bg-2: #d4edda;
  --status-ok-bg-3: #c8e6c9;
  --status-ok-bg-4: #e8f8f5;
  --status-ok-bg-5: #d1f2eb;
  --status-ok-bg-soft: #ecfdf5;
  --status-ok-text-deep: #065f46;
  --status-ok-text: #2e7d32;
  --status-ok-text-2: #00695c;
  --status-ok-text-3: #00796b;
  --status-warn-bg: #fff3cd;
  --status-warn-bg-2: #fff3e0;
  --status-warn-bg-3: #fff8e1;
  --status-warn-bg-4: #fffdf6;
  --status-warn-border-soft: #ffe082;
  --status-warn-text: #856404;
  --status-warn-text-2: #8a5a00;
  --status-warn-border: #ffc107;
  --status-info-bg: #d1ecf1;
  --status-info-bg-2: #e3f2fd;
  --status-info-text: #0c5460;
  --status-info-text-2: #23406f;
  --status-info-text-3: #1565c0;
  --status-danger-bg: #f8d7da;
  --status-danger-text: #c62828;
  --status-danger-text-2: #d63031;
  --status-neutral-bg: #f8f9fa;
  --status-neutral-bg-2: #e9ecef;
  --text-slate-muted: #636e72;            /* travel-expenses body/label grey */
  --text-charcoal: #2d3436;               /* travel-expenses body text */

  /* Pastel gradient stops (travel-expenses callouts). Tints of the same hue in dark. */
  --pale-info-1: #bbdefb;
  --pale-info-2: #90caf9;
  --pale-info-3: #f0f4ff;
  --pale-info-4: #e8f0fe;
  --pale-warn-1: #ffe0b2;
  --pale-warn-2: #fff3c4;
  --pale-warn-3: #ffecb3;
  --pale-warn-4: #fff9e6;
  --pale-warn-5: #ffeaa7;
  --pale-warn-6: #fffdf7;
  --pale-warn-7: #ffe0a3;
  --status-warn-accent: #ffb300;
  --pale-ok-1: #f1f8e9;
  --pale-neutral-1: #f8fafc;
  --pale-neutral-2: #dfe6e9;
  --pale-neutral-3: #b2bec3;
  --pale-neutral-4: #ffffff;
  --pale-info-5: #eef6ff;
  --pale-info-6: #f9fbff;
  --pale-info-7: #c9dcff;
  --bg-success-soft: #f0fdf4;                /* secondary button hover */
  --toggle-off-bg: rgba(6, 47, 39, 0.3);
  --toggle-off-bg-departments: rgba(6, 47, 39, 0.2);  /* departments.css uses a lighter track */
  --dropzone-bg: rgba(245, 243, 235, 0.7);
  --dropzone-bg-hover: rgba(236, 232, 219, 0.85);
  --dropzone-bg-active: #EEF2F6;
  --danger-ghost-bg: rgba(6, 47, 39, 0.08);   /* .btn-danger: muted dark green, never red */
  --danger-ghost-bg-hover: rgba(6, 47, 39, 0.12);
  --danger-ghost-text: rgba(6, 47, 39, 0.8);
  --danger-ghost-border: rgba(6, 47, 39, 0.2);
  --surface-glass: rgba(255, 255, 255, 0.6);        /* .frosty-card */
  --surface-glass-hover: rgba(255, 255, 255, 0.8);
  --surface-glass-strong: rgba(255, 255, 255, 0.9);
  --glass-blur-card: blur(12px) saturate(180%);
  --overlay: rgba(0, 0, 0, 0.5);
  --shadow-card: 0 8px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(13, 77, 59, 0.1);
  --jm-subbar-bg: rgba(249, 250, 251, 0.5);   /* journal manager sub-bars (was bg-gray-50/50) */
  --scrollbar-track: #F3F4F6;
  --scrollbar-thumb: #9CA3AF;
  --scrollbar-thumb-hover: #6B7280;
  --input-disabled-bg: #f3f4f6;
  --input-disabled-text: #9ca3af;
  --input-disabled-border: #d1d5db;
  --chart-text: #64748b;
  --chart-legend: #334155;
  --chart-grid: #e2e8f0;
  --chart-tooltip-bg: #ffffff;
  --chart-tooltip-title: #0f172a;
  --chart-tooltip-body: #334155;
  --chart-tooltip-border: #e2e8f0;

  /* === TAILWIND GRAY LITERALS, LOCKED TO A ROLE ===
     Page stylesheets hard-code Tailwind's gray scale in three roles. These
     names keep the literal recognisable and let dark mode remap by role
     (a #e5e7eb border and a #e5e7eb hover surface want different dark values). */
  --surface-gray-50: #f9fafb;
  --surface-gray-100: #f3f4f6;
  --surface-gray-200: #e5e7eb;
  --border-gray-100: #f3f4f6;
  --border-gray-200: #e5e7eb;
  --border-gray-300: #d1d5db;
  --text-gray-900: #111827;
  --text-gray-800: #1f2937;
  --text-gray-700: #374151;
  --text-gray-600: #4b5563;
  --text-gray-500: #6b7280;
  --text-gray-400: #9ca3af;

  /* === TRAVEL EXPENSES – second pass (2026-09-17): text/border literals the first pass left, plus JS-built HTML === */
  --status-ok-text-6: #155724;  /* badge-success / alert-success text */
  --status-ok-text-7: #1b5e20;  /* tax-rule-box text */
  --status-ok-text-8: #388e3c;  /* diag "passed" caption */
  --status-ok-text-9: #43a047;  /* compliance rank ok */
  --status-ok-text-10: #0e6655;
  --status-ok-text-11: #0c7f67;
  --status-ok-text-12: #1f5d37;  /* template hint text */
  --status-danger-text-5: #721c24;  /* alert-danger / badge-danger text */
  --status-danger-text-6: #c0392b;  /* toll category label */
  --status-danger-text-7: #b32022;
  --status-danger-text-8: #d35400;
  --status-danger-text-9: #b2451f;
  --status-danger-text-10: #e53935;  /* compliance rank low */
  --status-info-text-4: #0d47a1;  /* tax-rule-box.info text */
  --status-info-text-5: #1976d2;
  --status-info-text-6: #0a6fbf;
  --status-info-text-7: #0066cc;
  --status-info-text-8: #283593;  /* diesel fuel colour */
  --status-info-text-9: #3949ab;
  --status-info-text-10: #2c3e96;  /* hotel category label */
  --status-warn-text-3: #e65100;  /* tax-rule-box.warning text / petrol */
  --status-warn-text-4: #9a5600;
  --status-warn-text-5: #a35a00;
  --status-warn-text-6: #8b6400;
  --status-warn-text-7: #7f6000;
  --status-warn-text-8: #a0872a;
  --status-warn-text-9: #795548;  /* manual-km hint (brown) */
  --status-purple-text: #6a1b9a;  /* hybrid fuel colour */
  --status-purple-text-2: #5e35b1;
  --status-purple-text-3: #6f42c1;
  --status-teal-text: #006064;  /* LPG fuel colour */
  --te-ink: #333333;  /* travel page dark grey text */
  --te-ink-2: #555555;
  --te-muted: #666666;
  --te-faint: #999999;
  --te-slate-1: #4a5568;
  --te-slate-2: #495057;
  --pale-neutral-5: #f8faf9;
  --pale-neutral-6: #fafbfc;
  --pale-neutral-7: #e8e8e8;  /* category chip "other" */
  --pale-neutral-8: #f1f2f6;  /* fuel reimbursement idle */
  --pale-info-8: #f0f6ff;
  --pale-info-9: #f8fbff;
  --pale-info-10: #f0f7ff;  /* diag storage box */
  --pale-info-11: #e1e7ff;  /* hotel category chip */
  --pale-info-12: #e8eaf6;  /* indigo-50 */
  --pale-info-13: rgba(15, 52, 96, 0.04);
  --pale-info-14: rgba(15, 52, 96, 0.05);
  --pale-info-15: rgba(15, 52, 96, 0.08);  /* expense template active */
  --pale-ok-2: #eef8f1;
  --pale-ok-3: #f8fcf9;
  --pale-ok-4: #f0fff4;
  --pale-danger-1: #fce4ec;  /* diag failed */
  --pale-danger-2: #ffebee;
  --pale-danger-3: #ffcdd2;
  --pale-danger-4: #fff5f5;
  --pale-danger-5: #ffe5d9;  /* toll category chip (peach) */
  --pale-warn-9: #fffaf0;
  --pale-warn-10: #fff9c4;
  --pale-purple-1: #f3e5f5;
  --pale-cyan-1: #e0f7fa;
  --brand-tint-5: rgba(13, 77, 59, 0.03);  /* row hover */
  --brand-tint-6: rgba(13, 77, 59, 0.05);  /* soft fill (was the [style*=] hack value) */
  --brand-tint-7: rgba(13, 77, 59, 0.07);
  --brand-tint-8: rgba(13, 77, 59, 0.08);
  --brand-tint-9: rgba(13, 77, 59, 0.12);
  --brand-tint-10: rgba(13, 77, 59, 0.15);
  --brand-tint-11: rgba(13, 77, 59, 0.18);
  --brand-tint-12: rgba(13, 77, 59, 0.045);
  --brand-tint-13: rgba(13, 77, 59, 0.2);
  --brand-tint-14: rgba(13, 77, 59, 0.22);
  --brand-dark-tint-1: rgba(6, 47, 39, 0.03);
  --brand-dark-tint-2: rgba(6, 47, 39, 0.04);
  --status-danger-border-2: #f5c6cb;  /* alert-danger border */
  --status-danger-border-3: #feb2b2;
  --status-danger-border-4: #ef9a9a;
  --status-ok-border-2: #c3e6cb;  /* alert-success border */
  --status-ok-border-3: #a5d6a7;
  --status-ok-border-4: #9ae6b4;
  --status-ok-border-5: #cbe8d3;
  --status-info-border-1: #bee5eb;  /* alert-info border */
  --status-info-border-2: #90caf9;
  --status-info-border-3: #64b5f6;
  --status-info-border-4: #c0d5f5;
  --status-info-border-5: #9fa8da;
  --status-info-border-6: #ccccee;  /* diag storage box border */
  --status-warn-border-2: #ffcc80;
  --status-warn-border-3: #ffd54f;
  --status-warn-border-4: #fbd38d;
  --status-warn-border-5: #ffb74d;
  --status-purple-border: #ce93d8;
  --status-teal-border: #80deea;
  --te-line-1: #cccccc;  /* neutral hairlines */
  --te-line-2: #dddddd;
  --te-line-3: #e0e0e0;
  --te-line-4: #bbbbbb;
  --te-line-5: #dee2e6;
  --te-banner-warn-bg: linear-gradient(135deg, rgba(255, 243, 205, 0.95) 0%, rgba(255, 234, 194, 0.92) 100%);  /* .soft-workflow-banner */
  --te-amber-soft: #fdcb6e;   /* .fuel-calc box tint (the same hex as a BUTTON gradient stays literal) */
  --te-banner-info-bg: linear-gradient(135deg, rgba(227, 242, 253, 0.92) 0%, rgba(232, 245, 233, 0.92) 100%);
}

/* ========================================
   DARK MODE - green-tinted
   Surfaces come from the #062F27 family; brand green as TEXT is swapped for
   a lighter teal (#0D4D3B on these surfaces is 1.45:1; #62c2c1 clears 4.7:1
   on every surface, badge and hover tints included). Fills (buttons,
   nav-active gradients) keep their literal emerald/green - they read fine on
   dark. Contrast: text-primary 12.2:1, secondary 8.3:1, tertiary 5.2:1 on
   --bg-secondary.
   ======================================== */

@media screen {
    html.dark {
      color-scheme: dark;

      --bg-primary: #0b1f1a;
      --bg-secondary: #12302a;
      --bg-tertiary: #183b33;
      --bg-accent: #1f4a40;
      --bg-canvas: #0b1f1a;
      --bg-elevated: #163a32;
      --bg-hover: #1f4a40;
      --grid-line: rgba(79, 172, 171, 0.07);

      --text-primary: #e6f0ec;
      --text-secondary: #b7cbc4;
      --text-tertiary: #86a39a;
      --text-muted: #5f7d74;
      --text-inverse: #0b1f1a;
      --text-subtle: #86a39a;

      --border-light: rgba(255, 255, 255, 0.08);
      --border-medium: rgba(255, 255, 255, 0.14);
      --border-strong: rgba(255, 255, 255, 0.24);
      --border-card: rgba(255, 255, 255, 0.1);
      --border-default: rgba(255, 255, 255, 0.1);
      --border-cool: rgba(255, 255, 255, 0.1);
      --border-cool-strong: rgba(255, 255, 255, 0.18);

      /* brand green in a TEXT role */
      --brand-green: #62c2c1;
      --brand-green-dark: #7fc9c8;
      --brand-green-light: #5fb89a;
      --debit-color: #93c5fd;   /* #4A90E2 is 4.3:1 on the dark card */
      --credit-color: #34d399;   /* #059669 is 3.8:1 on the dark card */
      --balance-color: #62c2c1;
      --konto-color: var(--text-secondary);   /* account numbers read as ordinary cell text, not an accent */

      --primary-light: rgba(79, 172, 171, 0.14);
      --success-light: rgba(79, 172, 171, 0.12);
      --warning-light: rgba(79, 172, 171, 0.1);
      --danger: rgba(79, 172, 171, 0.7);       /* brand rule: ghost green, never red */
      --danger-dark: rgba(79, 172, 171, 0.9);
      --danger-light: rgba(79, 172, 171, 0.1);
      --brand-tint-1: rgba(79, 172, 171, 0.06);
      --brand-tint-2: rgba(79, 172, 171, 0.1);
      --brand-tint-3: rgba(79, 172, 171, 0.16);
      --brand-tint-4: rgba(79, 172, 171, 0.3);
      --border-glass: rgba(255, 255, 255, 0.08);
      --border-glass-soft: rgba(255, 255, 255, 0.07);
      --surface-panel: rgba(18, 48, 42, 0.75);
      --surface-panel-strong: rgba(18, 48, 42, 0.85);
      --surface-panel-hover: rgba(24, 59, 51, 0.85);
      --glass-blur-panel: none;
      --surface-modal: var(--bg-elevated);
      --surface-modal-input: var(--bg-tertiary);
      --glass-blur-modal: none;
      --surface-slate-100: #0f2822;
  --menu-item-text: var(--text-primary);
  --menu-item-active-bg: var(--bg-accent);
  --menu-error-text: #fca5a5;
      --status-danger-bg-2: rgba(248, 113, 113, 0.14);
      --status-danger-border: rgba(248, 113, 113, 0.35);
      --status-danger-text-3: #fca5a5;
      --status-ok-bg-6: rgba(52, 211, 153, 0.14);
      --status-ok-border: rgba(52, 211, 153, 0.35);
      --status-ok-bg-7: rgba(52, 211, 153, 0.18);
      --status-ok-text-5: #6ee7b7;
      --status-info-bg-3: rgba(96, 165, 250, 0.22);
      --status-info-bg-4: rgba(96, 165, 250, 0.1);
      --status-danger-bg-3: rgba(248, 113, 113, 0.1);
      --status-danger-text-4: #fca5a5;
      --pale-warn-8: rgba(251, 191, 36, 0.24);
      --status-ok-text-4: #34d399;
      --border-glass-faint: rgba(255, 255, 255, 0.07);
      --border-glass-faintest: rgba(255, 255, 255, 0.05);
      --dm-green-soft-fill: var(--brand-tint-2);
      --dm-bg-fill: #0b1f1a;
      --brand-fill: #0D4D3B;
  --dm-green-fill-hover: #062F27;

      --status-ok-bg: rgba(52, 211, 153, 0.14);
      --status-ok-bg-2: rgba(52, 211, 153, 0.18);
      --status-ok-bg-3: rgba(52, 211, 153, 0.22);
      --status-ok-bg-4: rgba(52, 211, 153, 0.1);
      --status-ok-bg-5: rgba(52, 211, 153, 0.16);
      --status-ok-bg-soft: rgba(52, 211, 153, 0.14);
      --status-ok-text-deep: #6ee7b7;
      --status-ok-text: #6ee7b7;
      --status-ok-text-2: #5eead4;
      --status-ok-text-3: #6ee7b7;
      --status-warn-bg: rgba(251, 191, 36, 0.14);
      --status-warn-bg-2: rgba(251, 191, 36, 0.18);
      --status-warn-bg-3: rgba(251, 191, 36, 0.1);
      --status-warn-bg-4: rgba(251, 191, 36, 0.06);
      --status-warn-border-soft: rgba(251, 191, 36, 0.3);
      --status-warn-text: #fcd34d;
      --status-warn-text-2: #fde68a;
      --status-warn-border: rgba(251, 191, 36, 0.45);
      --status-info-bg: rgba(96, 165, 250, 0.14);
      --status-info-bg-2: rgba(96, 165, 250, 0.18);
      --status-info-text: #93c5fd;
      --status-info-text-2: #bfdbfe;
      --status-info-text-3: #93c5fd;
      --status-danger-bg: rgba(248, 113, 113, 0.14);
      --status-danger-text: #fca5a5;
      --status-danger-text-2: #fca5a5;
      --status-neutral-bg: var(--bg-tertiary);
      --status-neutral-bg-2: var(--bg-accent);
      --text-slate-muted: #93b0a7;   /* travel hints sit on tinted boxes; #86a39a is 4.2:1 there */
      --text-charcoal: #e6f0ec;

      --pale-info-1: rgba(96, 165, 250, 0.2);
      --pale-info-2: rgba(96, 165, 250, 0.26);
      --pale-info-3: rgba(96, 165, 250, 0.1);
      --pale-info-4: rgba(96, 165, 250, 0.14);
      --pale-warn-1: rgba(251, 191, 36, 0.22);
      --pale-warn-2: rgba(251, 191, 36, 0.16);
      --pale-warn-3: rgba(251, 191, 36, 0.22);
      --pale-warn-4: rgba(251, 191, 36, 0.08);
      --pale-warn-5: rgba(251, 191, 36, 0.28);
      --pale-warn-6: rgba(251, 191, 36, 0.07);
      --pale-warn-7: rgba(251, 191, 36, 0.3);
      --status-warn-accent: #fbbf24;
      --pale-ok-1: rgba(52, 211, 153, 0.1);
      --pale-neutral-1: var(--bg-tertiary);
      --pale-neutral-2: var(--bg-accent);
      --pale-neutral-3: rgba(255, 255, 255, 0.16);
      --pale-neutral-4: rgba(255, 255, 255, 0.05);
      --pale-info-5: rgba(96, 165, 250, 0.12);
      --pale-info-6: rgba(96, 165, 250, 0.07);
      --pale-info-7: rgba(96, 165, 250, 0.3);
      --bg-success-soft: rgba(79, 172, 171, 0.12);
      --toggle-off-bg: rgba(255, 255, 255, 0.2);
      --toggle-off-bg-departments: rgba(255, 255, 255, 0.2);
      --dropzone-bg: rgba(79, 172, 171, 0.06);
      --dropzone-bg-hover: rgba(79, 172, 171, 0.1);
      --dropzone-bg-active: #183b33;
      --danger-ghost-bg: rgba(79, 172, 171, 0.1);
      --danger-ghost-bg-hover: rgba(79, 172, 171, 0.16);
      --danger-ghost-text: #7fc9c8;
      --danger-ghost-border: rgba(79, 172, 171, 0.3);

      --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
      --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35);
      --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
      --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.45);
      --shadow-card: 0 8px 32px -4px rgba(0, 0, 0, 0.5), 0 4px 12px -2px rgba(0, 0, 0, 0.3);

      --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.03), rgba(79, 172, 171, 0.03), rgba(255, 255, 255, 0.02));
      --glass-border: 1px solid rgba(255, 255, 255, 0.08);
      --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.45), inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
      --glass-bg-enhanced: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(79, 172, 171, 0.04) 100%);
      --glass-shadow-enhanced: 0 18px 42px -14px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06);
      --surface-glass: rgba(255, 255, 255, 0.04);
      --surface-glass-hover: rgba(255, 255, 255, 0.07);
      --surface-glass-strong: rgba(255, 255, 255, 0.09);
      --glass-blur-card: none;                  /* blur over a dark canvas looks muddy */
      --overlay: rgba(0, 0, 0, 0.7);

      --jm-subbar-bg: rgba(255, 255, 255, 0.03);
      --scrollbar-track: #0f2822;
      --scrollbar-thumb: #2d5a4e;
      --scrollbar-thumb-hover: #3d7466;
      --input-disabled-bg: #0f2822;
      --input-disabled-text: #5f7d74;
      --input-disabled-border: rgba(255, 255, 255, 0.1);

      --chart-text: #86a39a;
      --chart-legend: #b7cbc4;
      --chart-grid: rgba(255, 255, 255, 0.08);
      --chart-tooltip-bg: #163a32;
      --chart-tooltip-title: #e6f0ec;
      --chart-tooltip-body: #b7cbc4;
      --chart-tooltip-border: rgba(255, 255, 255, 0.14);

      --surface-gray-50: #183b33;
      --surface-gray-100: #0f2822;
      --surface-gray-200: #1f4a40;
      --border-gray-100: rgba(255, 255, 255, 0.06);
      --border-gray-200: rgba(255, 255, 255, 0.08);
      --border-gray-300: rgba(255, 255, 255, 0.14);
      --text-gray-900: #e6f0ec;
      --text-gray-800: #e6f0ec;
      --text-gray-700: #b7cbc4;
      --text-gray-600: #b7cbc4;
      --text-gray-500: #93b0a7;
      --text-gray-400: #86a39a;   /* the faintest role that still has to clear 4.5:1 on a card */

      /* === TRAVEL EXPENSES – second pass (2026-09-17): text/border literals the first pass left, plus JS-built HTML === */
      --status-ok-text-6: #6ee7b7;
      --status-ok-text-7: #6ee7b7;
      --status-ok-text-8: #6ee7b7;
      --status-ok-text-9: #6ee7b7;
      --status-ok-text-10: #5eead4;
      --status-ok-text-11: #5eead4;
      --status-ok-text-12: #6ee7b7;
      --status-danger-text-5: #fca5a5;
      --status-danger-text-6: #fca5a5;
      --status-danger-text-7: #fca5a5;
      --status-danger-text-8: #fdba74;
      --status-danger-text-9: #fdba74;
      --status-danger-text-10: #fca5a5;
      --status-info-text-4: #93c5fd;
      --status-info-text-5: #93c5fd;
      --status-info-text-6: #93c5fd;
      --status-info-text-7: #93c5fd;
      --status-info-text-8: #a5b4fc;
      --status-info-text-9: #a5b4fc;
      --status-info-text-10: #a5b4fc;
      --status-warn-text-3: #fdba74;
      --status-warn-text-4: #fcd34d;
      --status-warn-text-5: #fcd34d;
      --status-warn-text-6: #fcd34d;
      --status-warn-text-7: #fcd34d;
      --status-warn-text-8: #fcd34d;
      --status-warn-text-9: #fdba74;
      --status-purple-text: #c4b5fd;
      --status-purple-text-2: #c4b5fd;
      --status-purple-text-3: #c4b5fd;
      --status-teal-text: #67e8f9;
      --te-ink: #e6f0ec;
      --te-ink-2: #b7cbc4;
      --te-muted: #b7cbc4;
      --te-faint: #86a39a;
      --te-slate-1: #b7cbc4;
      --te-slate-2: #b7cbc4;
      --pale-neutral-5: #183b33;
      --pale-neutral-6: #183b33;
      --pale-neutral-7: #1f4a40;
      --pale-neutral-8: #183b33;
      --pale-info-8: rgba(96, 165, 250, 0.08);
      --pale-info-9: rgba(96, 165, 250, 0.06);
      --pale-info-10: rgba(96, 165, 250, 0.08);
      --pale-info-11: rgba(96, 165, 250, 0.16);
      --pale-info-12: rgba(129, 140, 248, 0.14);
      --pale-info-13: rgba(96, 165, 250, 0.08);
      --pale-info-14: rgba(96, 165, 250, 0.1);
      --pale-info-15: rgba(96, 165, 250, 0.14);
      --pale-ok-2: rgba(52, 211, 153, 0.1);
      --pale-ok-3: rgba(52, 211, 153, 0.06);
      --pale-ok-4: rgba(52, 211, 153, 0.1);
      --pale-danger-1: rgba(248, 113, 113, 0.12);
      --pale-danger-2: rgba(248, 113, 113, 0.1);
      --pale-danger-3: rgba(248, 113, 113, 0.2);
      --pale-danger-4: rgba(248, 113, 113, 0.08);
      --pale-danger-5: rgba(251, 146, 60, 0.16);
      --pale-warn-9: rgba(251, 191, 36, 0.06);
      --pale-warn-10: rgba(251, 191, 36, 0.16);
      --pale-purple-1: rgba(192, 132, 252, 0.12);
      --pale-cyan-1: rgba(34, 211, 238, 0.12);
      --brand-tint-5: rgba(79, 172, 171, 0.05);
      --brand-tint-6: rgba(79, 172, 171, 0.08);
      --brand-tint-7: rgba(79, 172, 171, 0.1);
      --brand-tint-8: rgba(79, 172, 171, 0.12);
      --brand-tint-9: rgba(79, 172, 171, 0.16);
      --brand-tint-10: rgba(79, 172, 171, 0.2);
      --brand-tint-11: rgba(79, 172, 171, 0.24);
      --brand-tint-12: rgba(79, 172, 171, 0.07);
      --brand-tint-13: rgba(79, 172, 171, 0.26);
      --brand-tint-14: rgba(79, 172, 171, 0.28);
      --brand-dark-tint-1: rgba(79, 172, 171, 0.05);
      --brand-dark-tint-2: rgba(79, 172, 171, 0.06);
      --status-danger-border-2: rgba(248, 113, 113, 0.35);
      --status-danger-border-3: rgba(248, 113, 113, 0.4);
      --status-danger-border-4: rgba(248, 113, 113, 0.45);
      --status-ok-border-2: rgba(52, 211, 153, 0.35);
      --status-ok-border-3: rgba(52, 211, 153, 0.4);
      --status-ok-border-4: rgba(52, 211, 153, 0.4);
      --status-ok-border-5: rgba(52, 211, 153, 0.35);
      --status-info-border-1: rgba(96, 165, 250, 0.35);
      --status-info-border-2: rgba(96, 165, 250, 0.45);
      --status-info-border-3: rgba(96, 165, 250, 0.5);
      --status-info-border-4: rgba(96, 165, 250, 0.35);
      --status-info-border-5: rgba(129, 140, 248, 0.45);
      --status-info-border-6: rgba(129, 140, 248, 0.3);
      --status-warn-border-2: rgba(251, 191, 36, 0.45);
      --status-warn-border-3: rgba(251, 191, 36, 0.5);
      --status-warn-border-4: rgba(251, 191, 36, 0.4);
      --status-warn-border-5: rgba(251, 146, 60, 0.5);
      --status-purple-border: rgba(192, 132, 252, 0.45);
      --status-teal-border: rgba(34, 211, 238, 0.45);
      --te-line-1: rgba(255, 255, 255, 0.16);
      --te-line-2: rgba(255, 255, 255, 0.12);
      --te-line-3: rgba(255, 255, 255, 0.12);
      --te-line-4: rgba(255, 255, 255, 0.2);
      --te-line-5: rgba(255, 255, 255, 0.12);
      --te-banner-warn-bg: linear-gradient(135deg, rgba(251, 191, 36, 0.14) 0%, rgba(251, 191, 36, 0.1) 100%);
      --te-amber-soft: rgba(251, 191, 36, 0.12);
      --te-banner-info-bg: linear-gradient(135deg, rgba(96, 165, 250, 0.12) 0%, rgba(52, 211, 153, 0.1) 100%);

      /* Legacy token set consumed by style.css / journal-manager.css. Their light
         values differ from the ones above on purpose (they are NOT aliases - aliasing
         would shift light pixels), so only the dark side is redefined here. */
      --light-bg-primary: #0b1f1a;
      --light-bg-secondary: #12302a;
      --light-bg-tertiary: #183b33;
      --light-text-primary: #e6f0ec;
      --light-text-secondary: #b7cbc4;
      --light-text-muted: #86a39a;
      --light-border: rgba(255, 255, 255, 0.1);
      --light-border-hover: #62c2c1;
      --light-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
      --light-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
      --light-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
      --light-shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.45);
    }
}