/*
 * ASC design tokens: the single source of truth for the portal's colours.
 *
 * Loaded straight after core.css (the Sneat/Bootstrap build, whose own root
 * variables are still Sneat purple) and before every app stylesheet, so
 * everything below wins over Sneat and every app rule can rely on it.
 *
 * These are the defaults (the ASC palette). Portal Setup > App Settings can
 * pick another palette; main.ejs then overrides the --asc-* values below
 * with a <style> rendered from src/utils/color.js.
 *
 * Two colours per palette, as WCAG 2.2 AA design systems do:
 * - --asc-brand: the palette's colour as chosen. Tints, focus, charts.
 * - --asc-interactive: the same hue darkened just enough for 4.5:1 with
 *   white text, on the page background and on its own badge tint. Buttons,
 *   links, active states, badge text.
 * tests/shared/asc-tokens.test.js checks both against color.js.
 */

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

  /* Brand: the teal of the ASC logo. */
  --asc-brand: #449bac;
  --asc-brand-rgb: 68, 155, 172;
  --asc-interactive: #087182;
  --asc-interactive-rgb: 8, 113, 130;
  /* Secondary accent (palette slot 2) and the selected-item highlight built
   * from it. */
  --asc-accent: #f2a65a;
  --asc-accent-rgb: 242, 166, 90;
  --asc-selection-bg: #fdf4eb;
  --asc-selection-border: #f9d7b5;
  /* Chart series (color.js deriveSeries; App Settings palettes override). */
  --asc-series-1: #449bac;
  --asc-series-2: #ce8436;
  --asc-series-3: #2e5e6e;
  --asc-series-4: #a0937f;
  --asc-series-5: #2563eb;

  /* Assignments calendar tiles by how each slot is going: not started
   * (idle, neutral), within its estimate (green) or over it (red). Each has a
   * fill, border, text, pill/progress track and progress gradient; the event
   * tile is the fill mixed 55% over --asc-calendar-tint-base. Dark gives each
   * state the same hue as a deep fill with light text
   * (assignment-calendar-palette.test.js checks AA and that the states stay
   * easy to tell apart). Light's green and red fills are deeper than the old
   * member pastels, so the states read apart on a white page. */
  --asc-calendar-tint-base: #fff;
  --asc-calendar-idle-bg: #e0e6ee;
  --asc-calendar-idle-border: #c5ced8;
  --asc-calendar-idle-text: #364152;
  --asc-calendar-idle-track: rgba(148, 163, 184, 0.2);
  --asc-calendar-idle-fill-from: #cbd5e1;
  --asc-calendar-idle-fill-to: #9eadc2;
  --asc-calendar-within-bg: #b5e3c3;
  --asc-calendar-within-border: #88d3a7;
  --asc-calendar-within-text: #16462c;
  --asc-calendar-within-track: rgba(98, 196, 138, 0.22);
  --asc-calendar-within-fill-from: #86efac;
  --asc-calendar-within-fill-to: #4ade80;
  --asc-calendar-over-bg: #f4c2cb;
  --asc-calendar-over-border: #ec8a9b;
  --asc-calendar-over-text: #6a2030;
  --asc-calendar-over-track: rgba(242, 160, 173, 0.24);
  --asc-calendar-over-fill-from: #fda4af;
  --asc-calendar-over-fill-to: #ff7a8d;

  /* Highlight rules (js/shared/highlight-rules.js, the same values; its test
   * checks contrast): row tints under the heading text, and number chips. */
  --asc-highlight-chip-text: #fff;
  --asc-highlight-amber-bg: #fdeac9;
  --asc-highlight-amber-chip: #b45309;
  --asc-highlight-red-bg: #fbd6d6;
  --asc-highlight-red-chip: #b91c1c;
  --asc-highlight-green-bg: #cef2dc;
  --asc-highlight-green-chip: #15803d;
  --asc-highlight-blue-bg: #d4e4fd;
  --asc-highlight-blue-chip: #1d4ed8;
  --asc-highlight-purple-bg: #ecdafd;
  --asc-highlight-purple-chip: #7e22ce;
  --asc-highlight-slate-bg: #dde0e5;
  --asc-highlight-slate-chip: #475569;

  /* Neutrals, by role. The light values are Sneat's own greys (muted and
   * soft darkened to AA, see below); dark mode gives each role its own value. Translucent borders, dividers and hover fills use
   * the -rgb inks, e.g. rgba(var(--asc-ink-rgb), 0.12); box-shadows use the
   * shadow ones, which turn black in dark instead of light. */
  --asc-ink: #22303e;
  --asc-ink-rgb: 34, 48, 62;
  --asc-ink-soft-rgb: 67, 89, 113;
  --asc-shadow-rgb: 34, 48, 62;
  --asc-shadow-soft-rgb: 67, 89, 113;
  --asc-text-heading: #384551;
  --asc-text-body: #566a7f;
  --asc-text-alt: #697a8d;
  --asc-text-muted: #616d7d;
  --asc-text-soft: #636d78;
  --asc-border: #d9dee3;
  --asc-page-bg: #f5f5f9;

  /* WCAG AA in light (approved 2026-10-02). Fills keep Sneat's bright colours
   * where dark text reads on them (success, warning, info); danger and
   * secondary fills darken just enough for white text. Wherever a status
   * colour is text (theme-overrides.css: text-*, label badges, outline
   * buttons) it uses the --asc-*-text shade of the same hue, AA on white, the
   * page and its own tint. Muted text darkens to AA. */
  --bs-secondary-color: #686c72;
  --bs-secondary-color-rgb: 104, 108, 114;
  --bs-danger: #e81f00;
  --bs-danger-rgb: 232, 31, 0;
  --bs-danger-contrast: #fff;
  --bs-secondary: #6b7788;
  --bs-secondary-rgb: 107, 119, 136;
  --bs-secondary-contrast: #fff;
  --bs-success: #71dd37;
  --bs-success-rgb: 113, 221, 55;
  --bs-success-contrast: #22303e;
  --bs-warning: #ffab00;
  --bs-warning-rgb: 255, 171, 0;
  --bs-warning-contrast: #22303e;
  --bs-info: #03c3ec;
  --bs-info-rgb: 3, 195, 236;
  --bs-info-contrast: #22303e;
  --asc-danger-text: #c70000;
  --asc-success-text: #007700;
  --asc-warning-text: #a05200;
  --asc-info-text: #006e95;
  --asc-secondary-text: #5d6979;
  --bs-code-color: #d2257a;

  /* Tailwind's slate greys, which later app code used next to Sneat's, as a
   * step scale: these values in light, inverted in dark (50 stays the
   * lightest surface, 900 the strongest text). Legacy literals only; new
   * code uses the role tokens above. */
  --asc-slate-50: #f8fafc;
  --asc-slate-100: #f1f5f9;
  --asc-slate-200: #e2e8f0;
  --asc-slate-300: #cbd5e1;
  --asc-slate-400: #94a3b8;
  --asc-slate-500: #64748b;
  --asc-slate-600: #475569;
  --asc-slate-700: #334155;
  --asc-slate-800: #1e293b;
  --asc-slate-900: #0f172a;
  --asc-slate-200-rgb: 226, 232, 240;
  --asc-slate-400-rgb: 148, 163, 184;
  --asc-slate-500-rgb: 100, 116, 139;
  --asc-slate-900-rgb: 15, 23, 42;
  --asc-shadow-deep-rgb: 15, 23, 42;

  /* Bootstrap/Sneat primary is the interactive shade (white text on it).
   * The tints follow Bootstrap 5.3's recipe from the brand (bg-subtle = 20%
   * brand on white, border-subtle = 40%, text-emphasis = 40% brand on
   * black); link hover is the same 10% darker shade core.css uses for
   * .btn-primary hover. */
  --bs-primary: var(--asc-interactive);
  --bs-primary-rgb: var(--asc-interactive-rgb);
  --bs-primary-contrast: #fff;
  --bs-primary-bg-subtle: color-mix(in sRGB, var(--asc-brand) 20%, #fff);
  --bs-primary-border-subtle: color-mix(in sRGB, var(--asc-brand) 40%, #fff);
  --bs-primary-text-emphasis: color-mix(in sRGB, var(--asc-brand) 40%, #000);
  --bs-link-color: var(--bs-primary);
  --bs-link-color-rgb: var(--bs-primary-rgb);
  --bs-link-hover-color: color-mix(in sRGB, #000 10%, var(--asc-interactive));
  --bs-link-hover-color-rgb: 7, 102, 117;
}

/*
 * Dark mode (approved at gate C): a deeper slate in the same blue-grey hue as
 * the light greys. Everything here is scoped to [data-bs-theme="dark"], so
 * light mode can't change (asc-tokens.test.js checks that). Fills the gaps in
 * core.css's own dark block (no paper/base colour, so cards, the navbar and
 * the sidebar stayed white) and replaces its purple-tinted subtle colours.
 */
[data-bs-theme="dark"] {
  color-scheme: dark;

  /* Surfaces: page, cards (navbar, sidebar, modals, dropdowns), raised. */
  --bs-body-bg: #1b232c;
  --bs-body-bg-rgb: 27, 35, 44;
  --bs-paper-bg: #232d38;
  --bs-paper-bg-rgb: 35, 45, 56;
  --bs-secondary-bg: #2b3743;
  --bs-secondary-bg-rgb: 43, 55, 67;
  --bs-tertiary-bg: #26303b;
  --bs-tertiary-bg-rgb: 38, 48, 59;
  --bs-border-color: #3a4654;
  --bs-border-color-translucent: rgba(232, 237, 242, 0.12);

  /* Text: every level passes AA on cards. */
  --bs-body-color: #c4ccd5;
  --bs-body-color-rgb: 196, 204, 213;
  --bs-heading-color: #e8edf2;
  --bs-emphasis-color: #e8edf2;
  --bs-emphasis-color-rgb: 232, 237, 242;
  --bs-secondary-color: #94a0ad;
  --bs-secondary-color-rgb: 148, 160, 173;
  --bs-tertiary-color: rgba(196, 204, 213, 0.5);
  --bs-tertiary-color-rgb: 196, 204, 213;
  --bs-base-color: #e8edf2;
  --bs-base-color-rgb: 232, 237, 242;

  /* Shadows go black, not light. */
  --bs-box-shadow: 0 0.1875rem 0.5rem 0 rgba(0, 0, 0, 0.3);
  --bs-box-shadow-xs: 0 0.0625rem 0.3175rem 0 rgba(0, 0, 0, 0.24);
  --bs-box-shadow-sm: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.26);
  --bs-box-shadow-lg: 0 0.25rem 0.75rem 0 rgba(0, 0, 0, 0.36);
  --bs-box-shadow-xl: 0 0.3125rem 1.375rem 0 rgba(0, 0, 0, 0.42);
  --bs-floating-component-shadow: 0 0.1875rem 0.5rem 0 rgba(0, 0, 0, 0.3);
  --bs-navbar-box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);

  /* Sneat's sidebar menu: light-only literals in core.css. */
  --bs-menu-color: #c4ccd5;
  --bs-menu-color-rgb: 196, 204, 213;
  --bs-menu-hover-bg: #2b3743;
  --bs-menu-hover-color: #e8edf2;
  --bs-menu-active-toggle-bg: #2b3743;
  --bs-menu-box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.3);
  --bs-menu-divider-color: var(--bs-border-color);

  /* Tonal primary: the palette's colour lightened for dark (color.js
   * deriveDarkVariant), with dark ink text on fills instead of white.
   * App Settings palettes override these in their own dark block. */
  --asc-brand: #62b7c9;
  --asc-brand-rgb: 98, 183, 201;
  --asc-interactive: #62b7c9;
  --asc-interactive-rgb: 98, 183, 201;
  --bs-primary-contrast: #111820;
  --asc-selection-bg: #38393b;
  --asc-selection-border: #806347;
  --asc-series-1: #449bac;
  --asc-series-2: #f2a65a;
  --asc-series-3: #8fcfd1;
  --asc-series-4: #4c7c8c;
  --asc-series-5: #f6e7d2;
  --bs-link-hover-color: color-mix(in sRGB, #fff 12%, var(--asc-interactive));
  --bs-link-hover-color-rgb: 117, 192, 207;

  /* Status colours: Sneat's danger and secondary lifted just enough for AA
   * as text on cards and on their own badge tint; the rest already pass. */
  /* Status colours as text: the bright dark-mode colours themselves. */
  --asc-danger-text: var(--bs-danger);
  --asc-success-text: var(--bs-success);
  --asc-warning-text: var(--bs-warning);
  --asc-info-text: var(--bs-info);
  --asc-secondary-text: var(--bs-secondary);

  /* Bright status fills carry dark ink text in dark (white fails on them). */
  --bs-danger-contrast: #111820;
  --bs-success-contrast: #111820;
  --bs-warning-contrast: #111820;
  --bs-info-contrast: #111820;
  --bs-secondary-contrast: #111820;
  --bs-code-color: #fc529d;
  --bs-danger: #ff8664;
  --bs-danger-rgb: 255, 134, 100;
  --bs-secondary: #9fadbe;
  --bs-secondary-rgb: 159, 173, 190;

  /* Subtle backgrounds, borders and emphasis text, from each colour over the
   * card (core.css's dark values are Sneat-purple tinted). */
  --bs-primary-bg-subtle: color-mix(in sRGB, var(--asc-brand) 16%, var(--bs-paper-bg));
  --bs-primary-border-subtle: color-mix(in sRGB, var(--asc-brand) 40%, var(--bs-paper-bg));
  --bs-primary-text-emphasis: color-mix(in sRGB, var(--asc-brand) 60%, #fff);
  --bs-secondary-bg-subtle: color-mix(in sRGB, var(--bs-secondary) 16%, var(--bs-paper-bg));
  --bs-secondary-border-subtle: color-mix(in sRGB, var(--bs-secondary) 40%, var(--bs-paper-bg));
  --bs-secondary-text-emphasis: color-mix(in sRGB, var(--bs-secondary) 60%, #fff);
  --bs-success-bg-subtle: color-mix(in sRGB, var(--bs-success) 16%, var(--bs-paper-bg));
  --bs-success-border-subtle: color-mix(in sRGB, var(--bs-success) 40%, var(--bs-paper-bg));
  --bs-success-text-emphasis: color-mix(in sRGB, var(--bs-success) 60%, #fff);
  --bs-info-bg-subtle: color-mix(in sRGB, var(--bs-info) 16%, var(--bs-paper-bg));
  --bs-info-border-subtle: color-mix(in sRGB, var(--bs-info) 40%, var(--bs-paper-bg));
  --bs-info-text-emphasis: color-mix(in sRGB, var(--bs-info) 60%, #fff);
  --bs-warning-bg-subtle: color-mix(in sRGB, var(--bs-warning) 16%, var(--bs-paper-bg));
  --bs-warning-border-subtle: color-mix(in sRGB, var(--bs-warning) 40%, var(--bs-paper-bg));
  --bs-warning-text-emphasis: color-mix(in sRGB, var(--bs-warning) 60%, #fff);
  --bs-danger-bg-subtle: color-mix(in sRGB, var(--bs-danger) 16%, var(--bs-paper-bg));
  --bs-danger-border-subtle: color-mix(in sRGB, var(--bs-danger) 40%, var(--bs-paper-bg));
  --bs-danger-text-emphasis: color-mix(in sRGB, var(--bs-danger) 60%, #fff);

  /* The ASC grey tokens (Step 0): same roles, dark values. */
  --asc-ink: #e8edf2;
  --asc-ink-rgb: 232, 237, 242;
  --asc-ink-soft-rgb: 196, 204, 213;
  --asc-shadow-rgb: 0, 0, 0;
  --asc-shadow-soft-rgb: 0, 0, 0;
  --asc-shadow-deep-rgb: 0, 0, 0;
  --asc-text-heading: #e8edf2;
  --asc-text-body: #c4ccd5;
  --asc-text-alt: #aab4bf;
  --asc-text-muted: #94a0ad;
  --asc-text-soft: #7d8996;
  --asc-border: #3a4654;
  --asc-page-bg: #1b232c;

  /* The slate scale inverted: 50 is still the subtlest surface, 900 the
   * strongest text. */
  --asc-slate-50: #26303b;
  --asc-slate-100: #2b3743;
  --asc-slate-200: #3a4654;
  --asc-slate-300: #4a5768;
  --asc-slate-400: #7d8996;
  --asc-slate-500: #94a0ad;
  --asc-slate-600: #b1bac5;
  --asc-slate-700: #c4ccd5;
  --asc-slate-800: #dde3e9;
  --asc-slate-900: #e8edf2;
  --asc-slate-200-rgb: 58, 70, 84;
  --asc-slate-400-rgb: 125, 137, 150;
  --asc-slate-500-rgb: 148, 160, 173;
  --asc-slate-900-rgb: 232, 237, 242;

  /* Assignments calendar state colours (see the light block). */
  --asc-calendar-tint-base: var(--bs-paper-bg);
  --asc-calendar-idle-bg: #404952;
  --asc-calendar-idle-border: #7c8794;
  --asc-calendar-idle-text: #e0e5eb;
  --asc-calendar-idle-track: rgba(124, 135, 148, 0.28);
  --asc-calendar-idle-fill-from: #515c69;
  --asc-calendar-idle-fill-to: #46515d;
  --asc-calendar-within-bg: #1d5437;
  --asc-calendar-within-border: #549771;
  --asc-calendar-within-text: #d0edda;
  --asc-calendar-within-track: rgba(84, 151, 113, 0.28);
  --asc-calendar-within-fill-from: #196b44;
  --asc-calendar-within-fill-to: #036039;
  --asc-calendar-over-bg: #69353f;
  --asc-calendar-over-border: #b56f7a;
  --asc-calendar-over-text: #fedadf;
  --asc-calendar-over-track: rgba(181, 111, 122, 0.28);
  --asc-calendar-over-fill-from: #89404f;
  --asc-calendar-over-fill-to: #7c3544;

  /* Highlight rules (see the light block). */
  --asc-highlight-chip-text: #111820;
  --asc-highlight-amber-bg: #66512a;
  --asc-highlight-amber-chip: #fbbf24;
  --asc-highlight-red-bg: #64343c;
  --asc-highlight-red-chip: #f87171;
  --asc-highlight-green-bg: #235e44;
  --asc-highlight-green-chip: #4ade80;
  --asc-highlight-blue-bg: #2b4875;
  --asc-highlight-blue-chip: #60a5fa;
  --asc-highlight-purple-bg: #4e3a75;
  --asc-highlight-purple-chip: #c084fc;
  --asc-highlight-slate-bg: #384453;
  --asc-highlight-slate-chip: #94a3b8;
}