/* ================================================================
   DESIGN TOKENS — single source of truth (--qs-*)
   ================================================================
   Linked globally (before style.css) so every page gets the same
   light/dark palette, spacing, radius, shadow and type scale.

   Values mirror the canonical set that previously lived only in the
   inline <style> of dashboard/templates/elements/dashboard-shared.html,
   which limited them to pages that include that partial.

   Usage: reference these instead of hardcoding values, e.g.
     color: var(--qs-text-primary);
     background: var(--qs-bg-primary);
     border-color: var(--qs-border-primary);
   They auto-switch in dark mode via the body.dark-mode block below.
   ================================================================ */

:root {
    /* ============================================================
       LIGHT — Tailwind gray (Aug 2026)
       One neutral family. Slate, zinc and the old Metrica navy that
       used to share the light theme are gone; every light rule elsewhere
       must reference these tokens — scripts/tokenize-dark-mode-css.py
       --light rewrites stray hexes and --light --lint holds the line.

       Elevation ladder (lightest → darkest):
         bg-primary    cards, table container  #ffffff
         bg-elevated   modals, dropdowns       #ffffff
         bg-secondary  canvas / page           #f9fafb  gray-50
         bg-tertiary   inputs, chips, code     #f3f4f6  gray-100
         bg-hover      hover fills             #eef0f3  gray-150 (half-stop)
       Text clears 4.5:1 on white and on the canvas; the status *text*
       weights (success/warning/danger) do too — fills use the -fill tokens.
       ============================================================ */
    color-scheme: light;

    /* --- Background Colors --- */
    --qs-bg-primary: #ffffff;
    --qs-bg-secondary: #f9fafb;
    --qs-bg-tertiary: #f3f4f6;
    --qs-bg-elevated: #ffffff;
    --qs-bg-hover: #eef0f3;

    /* --- Text Colors --- */
    --qs-text-primary: #111827;   /* gray-900 */
    --qs-text-secondary: #4b5563; /* gray-600 */
    --qs-text-muted: #646e7c;     /* between gray-500 and -600: 4.5:1+ on white, canvas, chips and hover fills */
    --qs-text-light: #646e7c;
    --qs-text-bright: #ffffff;   /* text on dark/accent fills */
    --qs-text-inverse: #ffffff;  /* text on an inverse-filled surface (black btn in light, white btn in dark) */

    /* --- Border Colors --- */
    --qs-border-primary: #e5e7eb;   /* gray-200 */
    --qs-border-secondary: #d1d5db; /* gray-300 — inputs, emphasised dividers */
    --qs-border-light: #f3f4f6;     /* gray-100 */

    /* --- Accent Colors --- */
    --qs-accent: #2563eb;          /* blue-600 — text weight, 5.2:1 on white */
    --qs-accent-hover: #1d4ed8;
    --qs-accent-light: rgba(37, 99, 235, 0.1);
    --qs-accent-lighter: rgba(37, 99, 235, 0.05);
    --qs-accent-dark: #1e40af;
    --qs-accent-fill: #2563eb;        /* blue fill under white text */
    --qs-accent-fill-hover: #1d4ed8;
    --qs-btn-fill: #111827;           /* primary button: black in light */
    --qs-btn-fill-hover: #1f2937;

    /* --- Status Colors --- */
    --qs-danger: #dc2626;
    --qs-danger-hover: #b91c1c;
    --qs-danger-light: rgba(220, 38, 38, 0.1);
    --qs-danger-bg: #fee2e2;
    --qs-danger-fill: #dc2626;
    --qs-danger-fill-hover: #b91c1c;
    --qs-success: #047857;            /* emerald-700 — text weight, 4.7:1 on white */
    --qs-success-light: rgba(16, 185, 129, 0.1);
    --qs-success-bg: #d1fae5;
    --qs-success-fill: #10b981;       /* emerald-500 — bars, dots, toggles */
    --qs-warning: #b45309;            /* amber-700 — text weight, 5.0:1 on white */
    --qs-warning-light: rgba(245, 158, 11, 0.1);
    --qs-warning-bg: #fef3c7;
    --qs-warning-fill: #f59e0b;       /* amber-500 — under dark text only */

    /* --- Shadows --- */
    --qs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --qs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --qs-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --qs-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* --- Border Radius (four values only) --- */
    --qs-radius-xs: 6px;
    --qs-radius-sm: 6px;
    --qs-radius-md: 6px;
    --qs-radius-lg: 12px;
    --qs-radius-xl: 12px;
    --qs-radius-card: 12px;
    --qs-radius-full: 9999px;
    --qs-radius-circle: 50%;

    /* --- Spacing (reference scale) --- */
    --qs-space-xs: 0.25rem;
    --qs-space-sm: 0.5rem;
    --qs-space-md: 1rem;
    --qs-space-lg: 1.5rem;
    --qs-space-xl: 2rem;

    /* --- Typography --- */
    --qs-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --qs-tracking: 0.5px;
    --qs-font-xs: 0.8125rem;
    --qs-btn-height-sm: 2rem;
    --qs-btn-height: 2.5rem;
    --qs-font-sm: 0.875rem;
    --qs-font-md: 1rem;
    --qs-font-lg: 1.125rem;
    --qs-font-xl: 1.25rem;
    --qs-font-2xl: 1.5rem;

    /* Form / select2 control height (38px at 16px root) */
    --qs-control-height: 2.375rem;

    /* App shell column. Not Bootstrap 1200 — the topbar and page body share this width. */
    --qs-shell-max: 1380px;

    /* --- Transitions --- */
    --qs-transition-fast: 150ms ease;
    --qs-transition-normal: 200ms ease;
    --qs-transition-slow: 300ms ease;

    /* --- Z-index scale (SYS-3) --- */
    --qs-z-base: 1;
    --qs-z-dropdown: 1100;
    --qs-z-sticky: 1020;
    --qs-z-floating-bar: 1030;
    --qs-z-modal-backdrop: 1040;
    --qs-z-modal: 1050;
    --qs-z-modal-nested: 1080;
    --qs-z-toast: 1100;
}

.custom-toast {
    display: none;
}

.custom-toast.show {
    display: block;
}

/* ================================================================
   DARK — "Ink" (Aug 2026)
   A cool charcoal, not Tailwind navy: the blue cast is kept as a hint so
   the app still reads as itself, but saturation is cut and surfaces get
   real elevation steps. Every dark rule elsewhere must reference these
   tokens — scripts/tokenize-dark-mode-css.py rewrites stray hexes.

   Elevation ladder (darkest → lightest):
     bg-secondary  canvas / page          #0b0d11
     bg-primary    cards, table container #12151b
     bg-elevated   modals, dropdowns      #161a21
     bg-tertiary   inputs, chips, code    #191d25
     bg-hover      hover fills            #1f242e
   Borders are translucent so they sit correctly on any step.
   ================================================================ */
html.dark-mode,
body.dark-mode {
    color-scheme: dark;

    --qs-bg-primary: #12151b;
    --qs-bg-secondary: #0b0d11;
    --qs-bg-tertiary: #191d25;
    --qs-bg-elevated: #161a21;
    --qs-bg-hover: #1f242e;

    --qs-text-primary: #e6eaf0;
    --qs-text-bright: #ffffff;
    --qs-text-secondary: #929db0;
    --qs-text-muted: #8391a5;
    --qs-text-light: #8391a5;
    --qs-text-inverse: #0b0d11;

    --qs-border-primary: rgba(148, 163, 184, 0.14);
    --qs-border-secondary: rgba(148, 163, 184, 0.26);
    --qs-border-light: rgba(148, 163, 184, 0.08);

    --qs-accent: #7ea6ff;
    --qs-accent-hover: #9dbcff;
    --qs-accent-light: rgba(126, 166, 255, 0.14);
    --qs-accent-lighter: rgba(126, 166, 255, 0.08);
    --qs-accent-dark: #1c2c4f;
    --qs-accent-fill: #3b6de0;
    --qs-accent-fill-hover: #3462d2;
    --qs-btn-fill: #3b6de0;
    --qs-btn-fill-hover: #3462d2;

    --qs-danger: #f47c7c;
    --qs-danger-hover: #f9a1a1;
    --qs-danger-light: rgba(244, 124, 124, 0.14);
    --qs-danger-bg: #3b1a1e;
    --qs-danger-fill: #c93f3f;
    --qs-danger-fill-hover: #b93b32;
    --qs-success: #4ecb8d;
    --qs-success-light: rgba(78, 203, 141, 0.14);
    --qs-success-bg: #11322a;
    --qs-success-fill: #2fb87a;
    --qs-warning: #f0bd4e;
    --qs-warning-fill: #f0bd4e;
    --qs-warning-light: rgba(240, 189, 78, 0.14);
    --qs-warning-bg: #3a2c12;

    --qs-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --qs-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3);
    --qs-shadow-md: 0 6px 14px -4px rgba(0, 0, 0, 0.55), 0 2px 4px -1px rgba(0, 0, 0, 0.35);
    --qs-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.65), 0 6px 12px -4px rgba(0, 0, 0, 0.4);
}