/* static/css/common/tokens.css
 * -----------------------------------------------------------------------------
 * Colour tokens for the light and dark themes (DASH-1768).
 *
 * Two layers, the same model as the Mimic dashboard (mimic-core/dashboard,
 * src/theme/index.ts):
 *
 *   1. Palette: the dashboard's Figma colour scales, 01 (lightest) to 10
 *      (darkest). Raw colours with no meaning attached; nothing outside this
 *      file should need them except categorical chart series.
 *   2. Semantic tokens: what a colour is FOR (page background, card surface,
 *      body text, border, status). Pages use these, never a literal, so one
 *      attribute flips the whole UI.
 *
 * The theme is html[data-theme="light" | "dark"], set before first paint by
 * the inline script at the top of index.html and kept current by
 * utils/Theme.ts. With no attribute (script blocked) the light values apply.
 *
 * Light values are the colours the UI already uses (Bootstrap 4.5 plus
 * styles.css), so moving a page onto tokens changes nothing in light mode.
 * Dark values come from the dashboard's palette: ink for surfaces, sky for
 * text, and its dark-menu greys (#2b2b2b / #343434), which the Dashcam
 * sidebar already uses.
 *
 * Brand colours are not here: tenant branding owns --brand-* and --sidebar-*
 * (utils/AppBranding.ts).
 * -------------------------------------------------------------------------- */

:root {
    /* ---- Palette (dashboard Figma scales) -------------------------------- */
    --palette-sky-01: #ffffff;
    --palette-sky-02: #fbfbfb;
    --palette-sky-03: #f4f4f4;
    --palette-sky-04: #efefee;
    --palette-sky-05: #e5e5e4;
    --palette-sky-06: #dbdad9;
    --palette-sky-07: #cecdcc;
    --palette-sky-08: #c5c4c2;
    --palette-sky-09: #b9b7b5;
    --palette-sky-10: #afadab;

    --palette-ink-01: #979592;
    --palette-ink-02: #888684;
    --palette-ink-03: #757472;
    --palette-ink-04: #686765;
    --palette-ink-05: #565554;
    --palette-ink-06: #464544;
    --palette-ink-07: #393837;
    --palette-ink-08: #292828;
    --palette-ink-09: #222121;
    --palette-ink-10: #191919;

    --palette-gold-01: #faefd1;
    --palette-gold-02: #f3dfaa;
    --palette-gold-03: #f4cf71;
    --palette-gold-04: #d4b25a;
    --palette-gold-05: #bfa050;
    --palette-gold-06: #a08644;
    --palette-gold-07: #826d37;
    --palette-gold-08: #63532b;
    --palette-gold-09: #403929;
    --palette-gold-10: #373229;

    --palette-blue-01: #e4f7fc;
    --palette-blue-02: #cbe9f0;
    --palette-blue-03: #8bd4e8;
    --palette-blue-04: #60bddb;
    --palette-blue-05: #3aa7cf;
    --palette-blue-06: #178bc1;
    --palette-blue-07: #126d97;
    --palette-blue-08: #08527d;
    --palette-blue-09: #1c3b49;
    --palette-blue-10: #20323a;

    --palette-green-01: #ecf4e0;
    --palette-green-02: #d1e2bb;
    --palette-green-03: #b6d68d;
    --palette-green-04: #9ac168;
    --palette-green-05: #7da749;
    --palette-green-06: #5c911c;
    --palette-green-07: #4a7119;
    --palette-green-08: #344b15;
    --palette-green-09: #2e391e;
    --palette-green-10: #2c3222;

    --palette-red-01: #fce7e3;
    --palette-red-02: #fad6cf;
    --palette-red-03: #ffc4b8;
    --palette-red-04: #ff9a78;
    --palette-red-05: #ff7142;
    --palette-red-06: #de4b1c;
    --palette-red-07: #a13517;
    --palette-red-08: #692317;
    --palette-red-09: #49261f;
    --palette-red-10: #402622;

    --palette-orange-01: #ffebd6;
    --palette-orange-02: #ffdcb8;
    --palette-orange-03: #ffc68a;
    --palette-orange-04: #ffac5a;
    --palette-orange-05: #ff9a2e;
    --palette-orange-06: #ff8800;
    --palette-orange-07: #c25700;
    --palette-orange-08: #823b00;
    --palette-orange-09: #512500;
    --palette-orange-10: #411a01;

    --palette-yellow-01: #faf6cf;
    --palette-yellow-02: #f3e9b4;
    --palette-yellow-03: #f9dc7d;
    --palette-yellow-04: #fac83d;
    --palette-yellow-05: #dda428;
    --palette-yellow-06: #b68107;
    --palette-yellow-07: #966703;
    --palette-yellow-08: #6e4602;
    --palette-yellow-09: #473517;
    --palette-yellow-10: #3b301e;

    --palette-purple-01: #f0ecf4;
    --palette-purple-02: #e4dbeb;
    --palette-purple-03: #d5bfe8;
    --palette-purple-04: #c3a4e5;
    --palette-purple-05: #ac8ed7;
    --palette-purple-06: #8d6fbe;
    --palette-purple-07: #7150a8;
    --palette-purple-08: #483374;
    --palette-purple-09: #3c2f56;
    --palette-purple-10: #342c44;

    /* ---- Semantic tokens: light (the default) ---------------------------- */
    /* Surfaces, back to front. */
    --color-bg: #f8f9fa;              /* page background (body) */
    --color-surface: #ffffff;         /* cards, panels, table bodies */
    --color-surface-raised: #ffffff;  /* modals, drawers */
    --color-surface-overlay: #ffffff; /* dropdowns, popovers, tooltips */
    --color-surface-muted: rgba(0, 0, 0, 0.05);  /* stripes, wells */
    --color-surface-hover: rgba(0, 0, 0, 0.075); /* row and item hover */
    --color-input-bg: #ffffff;

    /* Text. */
    --color-text: #212529;
    --color-text-secondary: #495057;
    --color-text-muted: #6c757d;
    --color-text-disabled: #6c757d;   /* Bootstrap's disabled items */
    --color-text-inverse: #ffffff;    /* text on a solid status or dark fill */

    /* Lines. */
    --color-border: #dee2e6;
    --color-border-subtle: #e9ecef;
    --color-border-strong: #ced4da;   /* form controls */

    /* Links and focus. */
    --color-link: #007bff;
    --color-link-hover: #0056b3;
    --color-focus-ring: rgba(0, 123, 255, 0.25);  /* Bootstrap's focus ring */

    /* Status: a foreground (icon, border, solid fill) and a tinted
       background for alerts and badges. */
    --color-success: #28a745;
    --color-success-bg: #d4edda;
    --color-warning: #ffc107;
    --color-warning-bg: #fff3cd;
    --color-danger: #dc3545;
    --color-danger-bg: #f8d7da;
    --color-info: #17a2b8;
    --color-info-bg: #d1ecf1;

    /* Depth. */
    --color-backdrop: rgba(0, 0, 0, 0.5);  /* modal backdrop */
    --color-shadow: rgba(0, 0, 0, 0.15);
}

/* ---- Semantic tokens: dark ------------------------------------------------
 * color-scheme switches native scrollbars, form controls, date pickers and
 * the canvas; the shell's dark rules are in theme-dark.css. */
html[data-theme="dark"] {
    color-scheme: dark;
    /* The page is the stock sidebar's #2b2b2b (styles.css --sidebar-bg
       fallback), so the stock rail and the page read as one surface; each
       level above it steps lighter: tables and cards, then modals, then
       menus and popovers. */
    --color-bg: #2b2b2b;
    --color-surface: #323232;
    --color-surface-raised: #383838;
    --color-surface-overlay: #3f3f3f;
    --color-surface-muted: rgba(251, 251, 251, 0.05);
    --color-surface-hover: rgba(251, 251, 251, 0.08);
    /* Inputs are recessed wells, darker than every surface level, so a
       field reads the same on the page, a card, a modal or a menu. */
    --color-input-bg: #222222;

    --color-text: var(--palette-sky-04);
    /* Muted text clears 4.5:1 on every dark surface and status tint. */
    --color-text-secondary: var(--palette-sky-07);
    --color-text-muted: var(--palette-sky-10);
    --color-text-disabled: var(--palette-ink-04);
    --color-text-inverse: var(--palette-ink-10);

    --color-border: rgba(251, 251, 251, 0.13);
    --color-border-subtle: rgba(251, 251, 251, 0.08);
    --color-border-strong: rgba(251, 251, 251, 0.2);

    --color-link: var(--palette-blue-04);
    --color-link-hover: var(--palette-blue-03);
    --color-focus-ring: rgba(96, 189, 219, 0.45);

    --color-success: var(--palette-green-04);
    --color-success-bg: var(--palette-green-09);
    --color-warning: var(--palette-yellow-04);
    --color-warning-bg: var(--palette-yellow-09);
    --color-danger: var(--palette-red-04);
    --color-danger-bg: var(--palette-red-09);
    --color-info: var(--palette-blue-04);
    --color-info-bg: var(--palette-blue-09);

    --color-backdrop: rgba(0, 0, 0, 0.6);
    --color-shadow: rgba(0, 0, 0, 0.5);
}