/* ============================================================ Fluent-inspired design tokens (light / dark) Based on Microsoft Fluent color semantics https://learn.microsoft.com/en-us/fluent-ui/web-components/ ============================================================ */ /* ---- Type roles (faces are self-hosted in fonts.css) ---- Display carries the personality and is used sparingly — page titles, card headers, column headers, the dashboard hero. Body is meant to disappear. Mono is for machine strings: access codes, extensions, device ids, build hashes. Deliberately outside the theme blocks: a face is not a colour, and all three roles are identical in light and dark. */ :root { --font-display: "Barlow Condensed", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; --font-body: "Inter", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace; /* Bootstrap resolves ,

, ,  and .font-monospace through
       these, so setting them here carries the roles into markup our own stylesheets
       never name. Bootstrap declares them on :root too but loads first, so this wins. */
    --bs-body-font-family: var(--font-body);
    --bs-font-monospace: var(--font-mono);
}

:root,
[data-theme="light"] {
    color-scheme: light;

    /* Surfaces */
    --color-bg-canvas: #f5f5f5;
    --color-bg-surface: #ffffff;
    --color-bg-subtle: #faf9f8;
    --color-bg-sidebar: #f3f2f1;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #edebe9;
    --color-bg-active: #e1dfdd;

    /* Sidebar nav — stronger contrast than generic surfaces */
    --color-nav-hover-bg: #e8e6e4;
    --color-nav-active-bg: #e1dfdd;
    --color-nav-hover-fg: #242424;

    /* Text */
    --color-text-primary: #242424;
    --color-text-secondary: #616161;
    --color-text-muted: #707070;
    --color-text-on-accent: #ffffff;

    /* Borders */
    --color-stroke-default: #e1dfdd;
    --color-stroke-strong: #c8c6c4;

    /* Brand — links, focus, nav accent (not solid buttons) */
    --color-brand: #b45b0b;
    --color-brand-hover: #96490a;
    --color-brand-pressed: #7a3b08;
    --color-brand-subtle: #fff4e5;

    /* Status — button/badge fills.
       Warning is ONE pair: --color-warning is the line/text/icon tone (borders, status dots,
       chart series), --color-warning-bg/-fg is the solid chip. There used to be a third,
       unrelated orange under --btn-warning-*; it now aliases this pair, as success/danger do.

       Warning stays gold because caution reads as yellow almost universally — a violet or teal
       "warning" would not be read as caution at all. But the brand is amber now, and the whole
       amber→yellow band is only ~25° of hue, so hue alone cannot separate them. Three axes do:
       warning sits yellower (~46° vs the brand's ~30°), is deliberately deep rather than bright,
       and carries WHITE text where every brand-amber fill carries near-black. So a warning chip
       and a primary button never resolve to the same thing, even at badge size. */
    --color-success: #107c10;
    --color-success-bg: #107c10;
    --color-warning: #7a5c00;
    --color-warning-bg: #8a6a00;
    --color-warning-fg: #ffffff;
    --color-danger: #a4262c;
    --color-danger-bg: #d13438;
    --color-danger-subtle: #fde7e9;
    --color-info: #0078d4;

    /* Shadows */
    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-4: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-8: 0 4px 8px rgba(0, 0, 0, 0.12);

    /* Radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    /* Legacy aliases (used by existing stylesheets) */
    --accent-color: var(--color-brand);
    --accent-hover: var(--color-brand-hover);
    --accent-light: var(--color-brand);
    --bg-dark: var(--color-bg-subtle);
    --bg-darker: var(--color-bg-canvas);
    --bg-gray1: var(--color-bg-surface);
    --bg-gray2: var(--color-bg-subtle);
    --bg-gray3: var(--color-stroke-default);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);

    /* Button fills — brand primary (same role in light and dark).
       Amber carries dark text, so hover brightens rather than darkens — darkening
       the fill would drop the foreground below 4.5:1. */
    --btn-primary-bg: #d97706;
    --btn-primary-hover: #e08a16;
    --btn-primary-pressed: #c2680a;
    --btn-primary-fg: #14161a;
    --btn-focus-shadow-rgb: 217, 119, 6;
    --btn-success-bg: var(--color-success-bg);
    --btn-success-fg: #ffffff;
    /* Warning carries WHITE text, so its hover darkens — the inverse of primary above.
       Brightening the fill drops the foreground below 4.5:1. */
    --btn-warning-bg: var(--color-warning-bg);
    --btn-warning-hover: #7a5c00;
    --btn-warning-pressed: #644c00;
    --btn-warning-fg: var(--color-warning-fg);
    --btn-danger-bg: var(--color-danger-bg);
    --btn-danger-fg: #ffffff;

    /* Bootstrap alignment. --bs-warning-rgb drives .text-warning/.border-warning, which pages do
       use — left unset it fell through to Bootstrap's #ffc107, a warning tone of its own. */
    --bs-primary: var(--btn-primary-bg);
    --bs-primary-rgb: 217, 119, 6;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 122, 92, 0;
    --bs-link-color: var(--color-brand);
    --bs-link-hover-color: var(--color-brand-hover);
}

[data-theme="dark"] {
    color-scheme: dark;

    --color-bg-canvas: #141414;
    --color-bg-surface: #292929;
    --color-bg-subtle: #1f1f1f;
    --color-bg-sidebar: #1a1a1a;
    --color-bg-elevated: #333333;
    --color-bg-hover: #383838;
    --color-bg-active: #424242;

    --color-nav-hover-bg: #2d2d2d;
    --color-nav-active-bg: #383838;
    --color-nav-hover-fg: #ffffff;

    --color-text-primary: #ffffff;
    --color-text-secondary: #d6d6d6;
    --color-text-muted: #adadad;
    --color-text-on-accent: #ffffff;

    --color-stroke-default: #3d3d3d;
    --color-stroke-strong: #525252;

    --color-brand: #f2a03d;
    --color-brand-hover: #f7b25e;
    --color-brand-pressed: #d4842a;
    --color-brand-subtle: #2b1d0b;

    --color-success: #5cb050;
    --color-success-bg: #0e700e;
    /* Same construction as light: yellower than the brand amber, and the fill is deep with
       white text while the brand fill is bright with near-black text. */
    --color-warning: #e9d15a;
    --color-warning-bg: #6f5500;
    --color-warning-fg: #ffffff;
    --color-danger: #e8707c;
    --color-danger-bg: #c50f1f;
    --color-danger-subtle: #3b0509;
    --color-info: #3a6f9e;

    --shadow-2: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-4: 0 2px 4px rgba(0, 0, 0, 0.5);
    --shadow-8: 0 4px 8px rgba(0, 0, 0, 0.55);

    --accent-color: var(--color-brand);
    --accent-hover: var(--color-brand-hover);
    --accent-light: var(--color-brand);
    --bg-dark: var(--color-bg-subtle);
    --bg-darker: var(--color-bg-canvas);
    --bg-gray1: var(--color-bg-surface);
    --bg-gray2: var(--color-bg-subtle);
    --bg-gray3: var(--color-stroke-default);
    --text-primary: var(--color-text-primary);
    --text-secondary: var(--color-text-secondary);
    --text-muted: var(--color-text-muted);
    --success: var(--color-success);
    --warning: var(--color-warning);
    --danger: var(--color-danger);
    --info: var(--color-info);

    --btn-primary-bg: #f2a03d;
    --btn-primary-hover: #f7b25e;
    --btn-primary-pressed: #d4842a;
    --btn-primary-fg: #14161a;
    --btn-focus-shadow-rgb: 242, 160, 61;
    --btn-success-bg: var(--color-success-bg);
    --btn-success-fg: #ffffff;
    --btn-warning-bg: var(--color-warning-bg);
    --btn-warning-hover: #5a4500;
    --btn-warning-pressed: #4a3800;
    --btn-warning-fg: var(--color-warning-fg);
    --btn-danger-bg: var(--color-danger-bg);
    --btn-danger-fg: #ffffff;

    --bs-primary: var(--btn-primary-bg);
    --bs-primary-rgb: 242, 160, 61;
    --bs-warning: var(--color-warning);
    --bs-warning-rgb: 233, 209, 90;
    --bs-link-color: var(--color-brand);
    --bs-link-hover-color: var(--color-brand-hover);
}