/* Design tokens — single source of truth for UI colors (load first on every page).
 *
 * Structure: primitives → semantic aliases → legacy names (kept for existing var()).
 * Change primitives to retheme; component CSS should use semantic tokens only.
 *
 * Not here: user profile colors (DB), Lottie JSON, dashboard chart series / pie
 * slice fills (data-driven in Python). Accent ramps use --color-*-brand + color-mix.
 */

:root {
    --banner-height: 40px;
    --sidebar-width: 90px;
    --sidebar-flyout-width: 220px;
    --page-header-row-height: calc(2 * 0.45rem + max(0.85rem * 1.2, 14px) + 2px);
    --filter-bar-width: 267px;
    --field-control-max-width: 270px;
    --field-date-max-width: 150px;

    /* ---- Primitives ---- */

    --color-white: #ffffff;
    --color-black: #000000;

    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #9ca3af;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;

    --color-slate-50: #f8fafc;
    --color-slate-400: #94a3b8;
    --color-slate-500: #64748b;
    --color-slate-700: #334155;
    --color-slate-900: #0f172a;

    /*
     * Accent ramps — each hue has --color-*-brand plus steps via color-mix(in srgb, …).
     * Same weights as blue: light tints (50/100/400), brand at 500, dark (600/700/800).
     * Extra 200 where UI needs a step between 100 and 400; red adds 900 for message text.
     */

    --color-blue-brand: #008bff;
    --color-blue-50: color-mix(in srgb, var(--color-blue-brand) 12%, white);
    --color-blue-100: color-mix(in srgb, var(--color-blue-brand) 28%, white);
    --color-blue-400: color-mix(in srgb, var(--color-blue-brand) 48%, white);
    --color-blue-500: var(--color-blue-brand);
    --color-blue-600: color-mix(in srgb, var(--color-blue-brand) 82%, black);
    --color-blue-700: color-mix(in srgb, var(--color-blue-brand) 62%, black);
    --color-blue-800: color-mix(in srgb, var(--color-blue-brand) 42%, black);

    --color-red-brand: #ff3b30;
    --color-red-50: color-mix(in srgb, var(--color-red-brand) 12%, white);
    --color-red-100: color-mix(in srgb, var(--color-red-brand) 28%, white);
    --color-red-200: color-mix(in srgb, var(--color-red-brand) 38%, white);
    --color-red-400: color-mix(in srgb, var(--color-red-brand) 48%, white);
    --color-red-500: var(--color-red-brand);
    --color-red-600: color-mix(in srgb, var(--color-red-brand) 82%, black);
    --color-red-700: color-mix(in srgb, var(--color-red-brand) 62%, black);
    --color-red-800: color-mix(in srgb, var(--color-red-brand) 42%, black);
    --color-red-900: color-mix(in srgb, var(--color-red-brand) 26%, black);

    --color-orange-brand: #ff7e00;
    --color-orange-50: color-mix(in srgb, var(--color-orange-brand) 12%, white);
    --color-orange-100: color-mix(in srgb, var(--color-orange-brand) 28%, white);
    --color-orange-400: color-mix(in srgb, var(--color-orange-brand) 48%, white);
    --color-orange-500: var(--color-orange-brand);
    --color-orange-600: color-mix(in srgb, var(--color-orange-brand) 82%, black);
    --color-orange-700: color-mix(in srgb, var(--color-orange-brand) 62%, black);
    --color-orange-800: color-mix(in srgb, var(--color-orange-brand) 42%, black);

    --color-yellow-brand: #d4a000;
    --color-yellow-50: color-mix(in srgb, var(--color-yellow-brand) 12%, white);
    --color-yellow-100: color-mix(in srgb, var(--color-yellow-brand) 28%, white);
    --color-yellow-400: color-mix(in srgb, var(--color-yellow-brand) 48%, white);
    --color-yellow-500: var(--color-yellow-brand);
    --color-yellow-600: color-mix(in srgb, var(--color-yellow-brand) 82%, black);
    --color-yellow-700: color-mix(in srgb, var(--color-yellow-brand) 62%, black);
    --color-yellow-800: color-mix(in srgb, var(--color-yellow-brand) 42%, black);

    /* Warnings / “amber” UI — same ramp as yellow (legacy names). */
    --color-amber-brand: var(--color-yellow-brand);
    --color-amber-50: var(--color-yellow-50);
    --color-amber-100: var(--color-yellow-100);
    --color-amber-400: var(--color-yellow-400);
    --color-amber-500: var(--color-yellow-500);
    --color-amber-600: var(--color-yellow-600);
    --color-amber-700: var(--color-yellow-700);
    --color-amber-800: var(--color-yellow-800);

    --color-green-brand: #00b63b;
    --color-green-50: color-mix(in srgb, var(--color-green-brand) 12%, white);
    --color-green-100: color-mix(in srgb, var(--color-green-brand) 28%, white);
    --color-green-200: color-mix(in srgb, var(--color-green-brand) 38%, white);
    --color-green-400: color-mix(in srgb, var(--color-green-brand) 48%, white);
    --color-green-500: var(--color-green-brand);
    --color-green-600: color-mix(in srgb, var(--color-green-brand) 82%, black);
    --color-green-700: color-mix(in srgb, var(--color-green-brand) 62%, black);
    --color-green-800: color-mix(in srgb, var(--color-green-brand) 42%, black);

    --color-purple-brand: #9361ff;
    --color-purple-50: color-mix(in srgb, var(--color-purple-brand) 12%, white);
    --color-purple-100: color-mix(in srgb, var(--color-purple-brand) 28%, white);
    --color-purple-400: color-mix(in srgb, var(--color-purple-brand) 48%, white);
    --color-purple-500: var(--color-purple-brand);
    --color-purple-600: color-mix(in srgb, var(--color-purple-brand) 82%, black);
    --color-purple-700: color-mix(in srgb, var(--color-purple-brand) 62%, black);
    --color-purple-800: color-mix(in srgb, var(--color-purple-brand) 42%, black);

    --color-pink-brand: #ff409f;
    --color-pink-50: color-mix(in srgb, var(--color-pink-brand) 12%, white);
    --color-pink-100: color-mix(in srgb, var(--color-pink-brand) 28%, white);
    --color-pink-400: color-mix(in srgb, var(--color-pink-brand) 48%, white);
    --color-pink-500: var(--color-pink-brand);
    --color-pink-600: color-mix(in srgb, var(--color-pink-brand) 82%, black);
    --color-pink-700: color-mix(in srgb, var(--color-pink-brand) 62%, black);
    --color-pink-800: color-mix(in srgb, var(--color-pink-brand) 42%, black);

    --color-neutral-600: #525252;
    --color-neutral-400: #888888;
    --color-neutral-300: #cccccc;
    --color-neutral-350: #bfbfbf;

    --color-navy-900: #0e2340;

    --color-teal-head-bg: #e3edf2;
    --color-teal-head-border: #b8ccd6;
    --color-teal-head-fg: #334155;
    --color-teal-row-hover: #eef2f7;

    /*
     * Sidebar palette options (change only the block marked ACTIVE).
     * Logo accent: #06B6ED. Ask to switch: "implement sidebar option 2" etc.
     */
    /* New Slate Neutral UI System tokens */
    --color-sidebar-bg: #0A1017;

    /* 1. Structural Borders - Subtle slate separation that doesn't scream */
    --color-sidebar-border: #1e293b;

    /* 2. Typography - Ultra-readable contrast steps on dark backgrounds */
    --color-sidebar-fg: #f8fafc;
    /* Off-white for active text/labels */
    --color-sidebar-fg-muted: #64748b;
    /* Nav icons — single slate for every link (no per-section hues). */
    --color-sidebar-icon: #94a3b8;

    /* 3. Interactive States */
    --color-sidebar-hover-bg: #2d3748;
    /* Visible on --color-sidebar-bg (#0A1017); distinct from active (#334155) */
    --color-sidebar-active-bg: #334155;
    /* Defined contrast for the currently selected page */

    /* 4. Brand Accent - Your new high-contrast universal digital blue */
    --color-sidebar-accent: #008BFF;
    /* Used for active indicator lines, icons, or dots */

    --alpha-focus-ring: 0.15;
    --alpha-shadow-sm: 0.02;
    --alpha-shadow-md: 0.18;
    --alpha-shadow-lg: 0.25;
    --alpha-shadow-xl: 0.3;
    --alpha-overlay: 0.45;
    --alpha-banner-hover: 0.14;
    --alpha-color-dot-border: 0.1;
    --alpha-color-dot-inset: 0.15;

    /* ---- Semantic: surfaces ---- */

    --surface-page: #f4f4f4;
    /* Frozen page title / toolbar band (same as scrollable body; token for overrides). */
    --surface-page-chrome: var(--surface-page);
    --surface-card: var(--color-white);
    --surface-muted: var(--color-gray-50);
    --surface-subtle: #fafafa;
    --surface-hover: var(--color-gray-100);
    --surface-selected: var(--color-blue-50);
    --surface-inverse: var(--color-gray-700);
    --surface-pager: var(--color-gray-200);
    --surface-pager-hover: var(--color-gray-300);
    --surface-pager-danger: var(--color-red-100);
    --surface-pager-danger-hover: var(--color-red-200);
    /* Fixed top bar (`.banner`); tweak here or override --surface-banner only. */
    --surface-header: #0A1017;
    --surface-banner: var(--surface-header);
    --surface-modal-scrim: rgba(0, 0, 0, var(--alpha-overlay));
    --surface-tooltip: var(--color-gray-900);
    --surface-help: var(--surface-subtle);
    --surface-code: var(--surface-muted);

    /* ---- Semantic: text ---- */

    --text-primary: var(--color-gray-900);
    --text-body: var(--color-gray-800);
    --text-secondary: var(--color-gray-500);
    --text-tertiary: var(--color-gray-400);
    --text-quaternary: var(--color-slate-400);
    --text-placeholder: var(--color-gray-300);
    --text-disabled: var(--color-gray-300);
    --text-inverse: var(--color-white);
    --text-on-dark: var(--color-white);
    --text-on-dark-muted: var(--color-slate-400);
    --text-on-dark-subtle: #e8e8e8;
    --text-on-dark-icon: #d4d4d4;
    --text-link: var(--color-blue-600);
    --text-link-hover: var(--color-blue-700);
    --text-section-heading: var(--color-blue-brand);
    --text-error: var(--color-red-600);
    --text-error-strong: var(--color-red-800);
    --text-help: var(--text-secondary);
    --text-label: var(--color-gray-700);
    --text-code: var(--color-gray-700);

    /* ---- Semantic: borders ---- */

    --border-default: #e3e3e3;
    --border-subtle: #f1f1f1;
    --border-light: #e8e8e8;
    --border-input: #e0e0e0;
    --border-strong: var(--color-gray-300);
    --border-section: var(--color-gray-300);
    --border-divider: var(--color-gray-200);
    --border-focus: var(--color-blue-600);
    --border-error: var(--color-red-200);
    --focus-ring: color-mix(in srgb,
            var(--color-blue-500) calc(var(--alpha-focus-ring) * 100%),
            transparent);
    --outline-focus: var(--color-blue-600);
    --outline-focus-light: color-mix(in srgb, var(--color-blue-brand) 55%, white);

    /* ---- Semantic: form controls ---- */

    --control-accent: var(--color-blue-brand);

    /* ---- Semantic: buttons ---- */

    --btn-primary-bg: var(--color-blue-500);
    --btn-primary-bg-hover: var(--color-blue-600);
    --btn-primary-fg: var(--color-white);
    --btn-primary-border: var(--color-blue-500);

    --btn-ghost-bg: var(--color-white);
    --btn-ghost-fg: var(--color-gray-500);
    --btn-ghost-bg-hover: var(--color-gray-100);
    --btn-ghost-fg-hover: var(--text-body);

    --btn-danger-bg: var(--color-white);
    --btn-danger-fg: var(--color-red-700);
    --btn-danger-border: var(--color-red-200);
    --btn-danger-bg-hover: var(--color-red-600);
    --btn-danger-fg-hover: var(--color-white);
    --btn-danger-border-hover: var(--color-red-600);

    --btn-accent-bg: var(--color-blue-500);
    --btn-accent-bg-hover: var(--color-blue-600);
    --btn-accent-fg: var(--color-white);
    --btn-accent-border: var(--color-blue-500);
    --btn-accent-border-hover: var(--color-blue-600);

    /* ---- Semantic: workflow status (requests table chips; matches dashboard cards) ---- */

    --status-open-bg: var(--color-blue-100);
    --status-open-fg: var(--color-blue-700);
    --status-in-progress-bg: var(--color-orange-100);
    --status-in-progress-fg: var(--color-orange-700);
    --status-to-review-bg: var(--color-purple-100);
    --status-to-review-fg: var(--color-purple-700);
    --status-under-review-bg: var(--color-pink-100);
    --status-under-review-fg: var(--color-pink-700);
    --status-complete-bg: var(--color-green-100);
    --status-complete-fg: var(--color-green-700);

    /* Legacy sidebar icon aliases — all map to --color-sidebar-icon (unused modifiers). */
    --sidebar-icon-red: var(--color-sidebar-icon);
    --sidebar-icon-orange: var(--color-sidebar-icon);
    --sidebar-icon-yellow: var(--color-sidebar-icon);
    --sidebar-icon-green: var(--color-sidebar-icon);
    --sidebar-icon-blue: var(--color-sidebar-icon);
    --sidebar-icon-purple: var(--color-sidebar-icon);
    --sidebar-icon-pink: var(--color-sidebar-icon);
    --sidebar-icon-neutral: var(--color-sidebar-icon);

    /* ---- Semantic: flash messages ---- */

    --message-success-fg: var(--color-green-800);
    --message-success-bg: var(--color-green-200);
    --message-success-border: var(--color-green-400);
    --message-success-icon: var(--color-green-700);

    --message-error-fg: var(--color-red-900);
    --message-error-bg: var(--color-red-200);
    --message-error-border: var(--color-red-400);
    --message-error-icon: var(--color-red-700);

    --message-warning-fg: var(--color-amber-800);
    --message-warning-bg: var(--color-amber-100);
    --message-warning-border: var(--color-amber-400);
    --message-warning-icon: var(--color-amber-700);

    --message-info-fg: var(--color-blue-800);
    --message-info-bg: var(--color-blue-100);
    --message-info-border: var(--color-blue-400);
    --message-info-icon: var(--color-blue-600);

    /* ---- Semantic: dashboard headings (muted; not form section blue) ---- */

    --dashboard-card-heading-fg: color-mix(in srgb, var(--color-slate-500) 45%, var(--color-slate-700) 55%);
    --dashboard-card-heading-size: 0.8125rem;
    --dashboard-card-heading-weight: 700;
    --dashboard-card-heading-tracking: 0.06em;
    --dashboard-card-heading-gap: 1rem;

    --dashboard-graph-heading-fg: color-mix(in srgb, var(--color-slate-500) 50%, var(--color-slate-400) 50%);
    --dashboard-graph-heading-size: 0.75rem;
    --dashboard-graph-heading-tracking: 0.06em;
    --dashboard-graph-heading-gap: 0.75rem;

    /* Dashboard workflow cards only (table status chips use --status-*). */
    --dashboard-workflow-open-bg: var(--color-blue-100);
    --dashboard-workflow-open-fg: var(--color-blue-700);
    --dashboard-workflow-in-progress-bg: var(--color-orange-100);
    --dashboard-workflow-in-progress-fg: var(--color-orange-700);
    --dashboard-workflow-to-review-bg: var(--color-purple-100);
    --dashboard-workflow-to-review-fg: var(--color-purple-700);
    --dashboard-workflow-under-review-bg: var(--color-pink-100);
    --dashboard-workflow-under-review-fg: var(--color-pink-700);
    --dashboard-workflow-complete-bg: var(--color-green-100);
    --dashboard-workflow-complete-fg: var(--color-green-700);

    /* Stacked bar charts: request type fills (brand primitives, no mix steps). */
    --chart-request-type-assessment: var(--color-green-brand);
    --chart-request-type-quote: var(--color-blue-brand);
    --chart-request-type-custom: var(--color-red-brand);

    /* YoY line chart — one color per year (cycles if more than five years). */
    --chart-yoy-year-1: var(--color-blue-400);
    --chart-yoy-year-2: var(--color-gray-700);
    --chart-yoy-year-3: var(--color-green-500);
    --chart-yoy-year-4: var(--color-red-500);
    --chart-yoy-year-5: var(--color-orange-500);

    /* ---- Semantic: scrollbars ---- */
    /* Thumb ~3:1+ on --surface-page (#f4f4f4) and white cards; darker on hover/active. */

    --scrollbar-size: 8px;
    --scrollbar-radius: 999px;
    --scrollbar-thumb: var(--color-slate-400);
    --scrollbar-thumb-hover: var(--color-slate-500);
    --scrollbar-thumb-active: var(--color-gray-600);
    --scrollbar-track: transparent;

    /* ---- Semantic: data tables ---- */

    --table-head-bg: var(--color-slate-50);
    --table-head-border: var(--color-teal-head-border);
    --table-head-fg: var(--color-slate-700);
    --table-row-hover: var(--color-teal-row-hover);
    --table-row-border: var(--border-subtle);
    --surface-row-prioritized: var(--color-red-100);
    --surface-row-prioritized-hover: var(--color-red-200);

    /* ---- Legacy aliases (existing var() references) ---- */

    --sidebar-bg: var(--color-sidebar-bg);
    --sidebar-border: var(--color-sidebar-border);
    --sidebar-fg: var(--color-sidebar-fg);
    --sidebar-fg-muted: var(--color-sidebar-fg-muted);
    --sidebar-group-fg: var(--text-on-dark-muted);
    --sidebar-hover-bg: var(--color-sidebar-hover-bg);
    --sidebar-active-bg: var(--color-sidebar-active-bg);
    --sidebar-active-accent: var(--color-sidebar-accent);
    --sidebar-group-rule: color-mix(in srgb, var(--sidebar-border) 85%, transparent);

    --content-bg: var(--surface-page);
    --content-gutter: 1rem;
    --content-fg: var(--text-body);
    --page-title-fg: var(--color-slate-900);
    --border: var(--border-default);
    --text-muted: var(--text-secondary);
    --accent-blue: var(--color-blue-brand);
    --accent-blue-hover: var(--color-blue-600);
}

/* Sign-in layout — dark full-screen shell + light card (scoped overrides). */
.layout--auth {
    --auth-surface-page: var(--color-black);
    --auth-surface-card: var(--color-white);
    --auth-brand-title: var(--color-navy-900);
    --auth-brand-suffix: var(--color-slate-500);
    --auth-label-fg: #333333;
    --auth-input-border: var(--border-input);
    --auth-input-fg: #333333;
    --auth-accent: var(--color-blue-500);
    --auth-accent-hover: var(--color-blue-600);
    --auth-accent-active: var(--color-blue-700);
    --auth-error-fg: var(--color-red-800);
    --auth-error-bg: #fef2f2;
    --auth-error-border: var(--color-red-200);
    --auth-card-shadow: rgba(0, 0, 0, var(--alpha-shadow-xl));
    /* Blue-black base, then 50% neutral slate — same depth, less chroma. */
    --auth-waves-color: color-mix(in srgb,
            color-mix(in srgb, var(--color-blue-brand) 50%, black) 50%,
            var(--color-slate-700));
    --auth-vignette-mid: rgba(0, 0, 0, 0.18);
    --auth-vignette-outer: rgba(0, 0, 0, 0.38);
    --auth-vignette-edge: rgba(0, 0, 0, 0.5);

    /* Legacy sign-in alias */
    --bp_blue: var(--auth-accent);
}