/*
 * tokens.css — the Notetaker design tokens. Source of truth for colour, type, spacing.
 *
 * Neutrals, semantic colours, spacing and shadows are harvested from the spike-harness design
 * (scripts/spike-harness.patch, screenshot-approved). The BRAND layer is the deliberate exception:
 * it comes from the DOT logo (web-service/public/dot-logo.svg, fill #0079B2), NOT the harness
 * accent — see style-guide plan Decision 6.
 *
 * Contrast (WCAG 2.1, measured):
 *   Light  --brand #0079B2 : 4.80:1 on --surface #ffffff (AA text + white-on-brand button OK).
 *                            4.20:1 on --bg #eef0f4 — DO NOT use brand text directly on --bg;
 *                            brand text lives on --surface, brand fills carry white labels.
 *   Dark   --brand #4FB3DF : 7.20:1 on --surface #171c24, 7.91:1 on --bg — AA/AAA.
 *   Dark primary button uses a --text-on-primary of near-black on the light-blue fill (4.5:1+).
 *
 * These custom properties are API for the console once published — rename only with a reason.
 */

:root {
  color-scheme: light dark;

  /* surface */
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --border: #e3e6ec;
  --border-strong: #cdd3dd;

  /* text */
  --text: #141a24;
  --muted: #5c6675;
  --faint: #939daf;

  /* brand — DOT blue, from the logo (#0079B2). accent/primary map to it. */
  --brand: #0079b2;
  --brand-strong: #005f8c; /* hover / pressed — darker DOT blue, 6.9:1 on white */
  --brand-tint: #e6f2f8; /* accent-bg: pale brand wash for selected/active surfaces */
  --accent: var(--brand);
  --accent-bg: var(--brand-tint);
  --primary: var(--brand);
  --primary-hover: var(--brand-strong);
  --on-primary: #ffffff;

  /* semantic — functional, not brand-derived (info may ride the brand family) */
  --ok: #0a7d4f;
  --ok-bg: #e3f4ea;
  --ok-glow: 10, 125, 79;
  --warn: #96570c;
  --warn-bg: #faf0da;
  --warn-edge: #d99a2b;
  --err: #d92d20;
  --err-rgb: 217, 45, 32;
  --err-bg: #fde7e5;
  --info: #0079b2;
  --info-bg: #e6f2f8;

  /* chips */
  --chip-bg: #edeff3;
  --chip-text: #4c5565;

  /* effects */
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 10px 28px -14px rgba(16, 24, 40, 0.22);
  --focus-ring: 0 0 0 3px rgba(0, 121, 178, 0.35);
  /* lightbox backdrop — must DARKEN in both themes (a text-derived scrim goes pale in dark) */
  --scrim: rgba(16, 24, 40, 0.72);

  /* layout: how far a sticky element must sit below the console's sticky header (theme-independent) */
  --header-clear: 72px;

  /* spacing scale (4px base) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;

  /* radius */
  --radius-sm: 6px;
  --radius: 9px;
  --radius-lg: 14px;

  /* type */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1218;
    --surface: #171c24;
    --surface-2: #1d232e;
    --border: #29303c;
    --border-strong: #39424f;

    --text: #e7eaf0;
    --muted: #9ba5b6;
    --faint: #6d7787;

    /* brand — lightened DOT blue for dark surfaces (7.2:1 on --surface). Same hue family. */
    --brand: #4fb3df;
    --brand-strong: #74c4e8;
    --brand-tint: #16303d;
    --accent: var(--brand);
    --accent-bg: var(--brand-tint);
    --primary: #4fb3df;
    /* on a light-blue fill, near-black text keeps the 4.5:1 the white-on-blue light theme has */
    --primary-hover: #74c4e8;
    --on-primary: #0a1620;

    --ok: #43cf8c;
    --ok-bg: #12301f;
    --ok-glow: 67, 207, 140;
    --warn: #e3ab52;
    --warn-bg: #32270f;
    --warn-edge: #b98722;
    --err: #f26d61;
    --err-rgb: 242, 109, 97;
    --err-bg: #3a1613;
    --info: #4fb3df;
    --info-bg: #16303d;

    --chip-bg: #252c38;
    --chip-text: #aeb7c6;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2: 0 10px 28px -14px rgba(0, 0, 0, 0.6);
    --focus-ring: 0 0 0 3px rgba(79, 179, 223, 0.4);
    --scrim: rgba(0, 0, 0, 0.78);
  }
}

/* Explicit theme overrides win over the system default (toggle stamps data-theme on <html>). */
:root[data-theme='light'] {
  color-scheme: light;
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --border: #e3e6ec;
  --border-strong: #cdd3dd;
  --text: #141a24;
  --muted: #5c6675;
  --faint: #939daf;
  --brand: #0079b2;
  --brand-strong: #005f8c;
  --brand-tint: #e6f2f8;
  --primary: #0079b2;
  --primary-hover: #005f8c;
  --on-primary: #ffffff;
  --accent: var(--brand);
  --accent-bg: var(--brand-tint);
  /* Status tokens too: without them a forced-light page on a dark-mode OS kept the media query's
   *  dark status colours — pale-on-white pills and washed-out notices (found 2026-08-04, when the
   *  mirror-image gap made a forced-DARK page show the light theme's pink error notice). */
  --ok: #0a7d4f;
  --ok-bg: #e3f4ea;
  --ok-glow: 10, 125, 79;
  --warn: #96570c;
  --warn-bg: #faf0da;
  --warn-edge: #d99a2b;
  --err: #d92d20;
  --err-rgb: 217, 45, 32;
  --err-bg: #fde7e5;
  --info: #0079b2;
  --info-bg: #e6f2f8;
  --chip-bg: #edeff3;
  --chip-text: #4c5565;
  --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-2: 0 10px 28px -14px rgba(16, 24, 40, 0.22);
  --focus-ring: 0 0 0 3px rgba(0, 121, 178, 0.35);
  /* lightbox backdrop — must DARKEN in both themes (a text-derived scrim goes pale in dark) */
  --scrim: rgba(16, 24, 40, 0.72);
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0e1218;
  --surface: #171c24;
  --surface-2: #1d232e;
  --border: #29303c;
  --border-strong: #39424f;
  --text: #e7eaf0;
  --muted: #9ba5b6;
  --faint: #6d7787;
  --brand: #4fb3df;
  --brand-strong: #74c4e8;
  --brand-tint: #16303d;
  --primary: #4fb3df;
  --primary-hover: #74c4e8;
  --on-primary: #0a1620;
  --accent: var(--brand);
  --accent-bg: var(--brand-tint);
  /* Status tokens — same gap as the light block above: the toggle must override ALL of what the
   *  media query sets, or a forced theme is half the other theme. Values mirror the media block. */
  --ok: #43cf8c;
  --ok-bg: #12301f;
  --ok-glow: 67, 207, 140;
  --warn: #e3ab52;
  --warn-bg: #32270f;
  --warn-edge: #b98722;
  --err: #f26d61;
  --err-rgb: 242, 109, 97;
  --err-bg: #3a1613;
  --info: #4fb3df;
  --info-bg: #16303d;
  --chip-bg: #252c38;
  --chip-text: #aeb7c6;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 10px 28px -14px rgba(0, 0, 0, 0.6);
  --focus-ring: 0 0 0 3px rgba(79, 179, 223, 0.4);
  --scrim: rgba(0, 0, 0, 0.78);
}