/* =========================================================================================
   Colour tokens for light and dark mode

   <html data-theme="light|dark"> is set before the page draws by the script at the top of
   Site.master (and Login.aspx), from the user's choice of Light / Dark / Auto; Auto follows the
   operating system. Everything that should follow the theme reads these variables instead of a
   hard-coded colour: Content/dc-design.css and the inline styles of App_Code/Helpers/GridStyles.cs
   (an inline style="color:var(--g-text)" still follows the theme, which is why the grids can
   keep their inline styles).

   The light values are the design kit's own colours, so light mode looks exactly as before.

   Content/theme-dark.css uses the same tokens to repaint the older template pages (bootstrap,
   files/assets/css/style.css) while dark mode is on.
   ========================================================================================= */

:root {
    /* surfaces */
    --g-bg: #f4f7fa;                 /* page background */
    --g-surface: #fff;               /* cards, inputs, dropdowns */
    --g-surface-alt: #f8fafc;        /* table heads, toolbars, read-only fields */
    --g-surface-row-alt: #fbfcfe;    /* striped grid rows */

    /* lines */
    --g-border: #d9e0e8;             /* input and card borders */
    --g-border-soft: #eceff3;        /* separators inside cards */
    --g-border-faint: #f1f4f7;       /* row rules */

    /* text */
    --g-text-strong: #404E67;        /* titles, labels */
    --g-text: #37474f;               /* body text */
    --g-text-muted: #607089;         /* secondary text */
    --g-text-subtle: #8794a8;        /* hints, descriptions */
    --g-text-faint: #b0bac7;         /* placeholders, disabled */

    /* brand and states */
    --g-primary: #01a9ac;
    --g-primary-hover: #018e91;
    --g-primary-soft: #e8f6f6;       /* selected or hovered rows, chips */
    --g-success: #2ed8b6;
    --g-danger: #d0322f;
    --g-danger-soft: #fdeaea;
    --g-danger-border: #f3c9c8;
    --g-warning-soft: #fff8e8;
    --g-warning-border: #f3dfae;
    --g-switch-off: #cfd8e3;         /* track of a switch that is off */

    /* status pills (GridStyles.StatusBadge) */
    --g-badge-info-bg: #eef1ff;     --g-badge-info-fg: #4a5fd0;
    --g-badge-success-bg: #e6f7f1;  --g-badge-success-fg: #159c78;
    --g-badge-warning-bg: #fff4e0;  --g-badge-warning-fg: #c07d10;
    --g-badge-danger-bg: #fdecec;   --g-badge-danger-fg: #c0392b;

    /* elevation */
    --g-shadow: rgba(64,78,103,0.08);
    --g-shadow-strong: rgba(64,78,103,0.14);
}

:root[data-theme="dark"] {
    --g-bg: #121722;
    --g-surface: #1b2230;
    --g-surface-alt: #222a3a;
    --g-surface-row-alt: #1f2634;

    --g-border: #354157;
    --g-border-soft: #2a3346;
    --g-border-faint: #252e3f;

    --g-text-strong: #eef2f7;
    --g-text: #d3dbe6;
    --g-text-muted: #a3b0c2;
    --g-text-subtle: #8492a7;
    --g-text-faint: #5f6c82;

    --g-primary: #1bbfc2;            /* a step lighter, to keep its contrast on dark surfaces */
    --g-primary-hover: #3fd0d2;
    --g-primary-soft: rgba(27,191,194,0.14);
    --g-success: #2ed8b6;
    --g-danger: #ff6b68;
    --g-danger-soft: rgba(255,107,104,0.14);
    --g-danger-border: rgba(255,107,104,0.35);
    --g-warning-soft: rgba(245,166,35,0.14);
    --g-warning-border: rgba(245,166,35,0.35);
    --g-switch-off: #3d4a62;

    --g-badge-info-bg: rgba(122,140,255,0.18);   --g-badge-info-fg: #a9b5ff;
    --g-badge-success-bg: rgba(46,216,182,0.16); --g-badge-success-fg: #5fe0c3;
    --g-badge-warning-bg: rgba(245,166,35,0.18); --g-badge-warning-fg: #f5b955;
    --g-badge-danger-bg: rgba(255,107,104,0.18); --g-badge-danger-fg: #ff8f8c;

    --g-shadow: rgba(0,0,0,0.35);
    --g-shadow-strong: rgba(0,0,0,0.5);
}

/* Native controls (checkboxes, scrollbars, date pickers) follow the theme too. The rest of the
   dark page (template surfaces, forms, tables, widgets) is Content/theme-dark.css. */
:root[data-theme="dark"] { color-scheme: dark; }

/* --- theme switch in the header (Site.master) ------------------------------------------- */
.g-theme-switch { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.g-theme-switch i { font-size: 16px; }