/*
 * Material 3 design tokens for the admin UI, as CSS variables.
 *
 * Values are space-separated RGB channels, not hex, so tailwind-theme.js can
 * wrap them as `rgb(var(--color-x) / <alpha-value>)`. That is what lets the
 * existing markup keep writing `bg-primary/10` or `border-outline-variant/50`
 * and still work — the opacity modifier needs a channel triplet, not a hex.
 *
 * Dark mode is a *selected* palette, not an inversion: each token gets its own
 * step so contrast holds against the dark surface.
 */

:root {
    --color-primary: 67 66 114;                 /* #434272 */
    --color-primary-dim: 58 57 100;             /* #3a3964 */
    --color-primary-container: 91 90 139;       /* #5b5a8b */
    --color-on-primary: 255 255 255;
    --color-on-primary-container: 216 213 255;  /* #d8d5ff */

    --color-secondary: 39 88 194;               /* #2758c2 */
    --color-on-secondary: 255 255 255;
    --color-secondary-container: 219 225 255;   /* #dbe1ff */
    --color-on-secondary-container: 0 41 113;   /* #002971 */

    --color-tertiary: 115 55 0;                 /* #733700 */
    --color-on-tertiary: 255 255 255;
    --color-tertiary-container: 255 220 198;    /* #ffdcc6 */
    --color-on-tertiary-container: 114 54 0;    /* #723600 */

    --color-error: 186 26 26;                   /* #ba1a1a */
    --color-error-container: 255 218 214;       /* #ffdad6 */
    --color-on-error-container: 147 0 10;       /* #93000a */

    --color-background: 253 248 253;            /* #fdf8fd */
    --color-surface: 253 248 253;
    --color-surface-container-lowest: 255 255 255;
    --color-surface-container-low: 247 242 248; /* #f7f2f8 */
    --color-surface-container: 241 236 242;     /* #f1ecf2 */
    --color-surface-container-high: 235 231 236;
    --color-surface-container-highest: 229 225 231;
    --color-surface-variant: 229 225 231;

    --color-on-surface: 28 27 31;               /* #1c1b1f */
    --color-on-surface-variant: 71 70 79;       /* #47464f */
    --color-outline: 120 118 128;               /* #787680 */
    --color-outline-variant: 200 197 208;       /* #c8c5d0 */

    /* Chart marks. Read by dashboard-charts.js, never by Tailwind.
     * The blue/amber pair is validated (lightness, chroma, CVD separation and
     * contrast) against BOTH surfaces, so it is deliberately identical in dark
     * mode — lightening it for dark pushed it out of the lightness band. */
    --chart-translation: #3f6bd6;
    --chart-ocr: #c76b1f;
    --chart-memory: #755478;

    /* 5-slot categorical ramp for the model-distribution doughnut. Fixed order:
     * the ordering is the CVD-safety mechanism, so do not shuffle it. */
    --chart-series-1: #2a78d6;
    --chart-series-2: #1baf7a;
    --chart-series-3: #eda100;
    --chart-series-4: #008300;
    --chart-series-5: #4a3aa7;

    /* Chart chrome (axis ticks, gridlines) — recessive by design. */
    --chart-ink: #47464f;
    --chart-grid: rgba(0, 0, 0, 0.08);
}

.dark {
    --color-primary: 195 193 249;               /* #c3c1f9 */
    --color-primary-dim: 173 171 226;           /* #adabe2 */
    --color-primary-container: 67 66 113;       /* #434271 */
    --color-on-primary: 23 21 67;               /* #171543 */
    --color-on-primary-container: 226 223 255;  /* #e2dfff */

    --color-secondary: 179 197 255;             /* #b3c5ff */
    --color-on-secondary: 0 24 73;              /* #001849 */
    --color-secondary-container: 0 63 164;      /* #003fa4 */
    --color-on-secondary-container: 219 225 255;/* #dbe1ff */

    --color-tertiary: 255 183 134;              /* #ffb786 */
    --color-on-tertiary: 49 19 0;               /* #311300 */
    --color-tertiary-container: 114 54 0;       /* #723600 */
    --color-on-tertiary-container: 255 220 198; /* #ffdcc6 */

    --color-error: 255 180 171;                 /* #ffb4ab */
    --color-error-container: 147 0 10;          /* #93000a */
    --color-on-error-container: 255 218 214;    /* #ffdad6 */

    /* Cards sit on `bg-surface-container-lowest`. In dark that must be LIGHTER
     * than the page background, otherwise every card disappears into it — the
     * opposite of the light-mode relationship, and the reason these steps are
     * not a mechanical inversion of the ones above. */
    --color-background: 20 19 24;               /* #141318 */
    --color-surface: 20 19 24;
    --color-surface-container-lowest: 31 30 36; /* #1f1e24 — card */
    --color-surface-container-low: 37 36 42;    /* #25242a */
    --color-surface-container: 42 41 47;        /* #2a292f */
    --color-surface-container-high: 53 51 58;   /* #35333a */
    --color-surface-container-highest: 64 62 70;/* #403e46 */
    --color-surface-variant: 71 70 79;

    --color-on-surface: 229 225 231;            /* #e5e1e7 */
    --color-on-surface-variant: 200 197 208;    /* #c8c5d0 */
    --color-outline: 145 143 153;               /* #918f99 */
    --color-outline-variant: 71 70 79;          /* #47464f */

    --chart-translation: #3f6bd6;
    --chart-ocr: #c76b1f;
    --chart-memory: #b89bbb;

    --chart-series-1: #3987e5;
    --chart-series-2: #199e70;
    --chart-series-3: #c98500;
    --chart-series-4: #008300;
    --chart-series-5: #9085e9;

    --chart-ink: #c8c5d0;
    --chart-grid: rgba(255, 255, 255, 0.10);
}