/*
  The Nocturne tokens every surface consumes, in every client that shares ClientUi (#118, #295). Each
  client links this sheet before its own, as _content/ClientUi/nocturne.css.

  Nocturne comes from design/"Auth - issue 10.dc.html" and extends to the signed-in app in
  design/"App shell - issue 32.dc.html". The design files name the same values through their design
  system (--color-accent-300 is --nocturne-accent-text here, --color-neutral-900 is
  --nocturne-line-soft, --color-accent-900 is --nocturne-accent-deep, and so on). This is the one
  declaration site: every client stylesheet and every component stylesheet consumes these, and none
  redeclares them (print, in WebApp's app.css, is the one exception: paper has its own palette).

  Light (#328, "Matins", .stitch/DESIGN.md): the same names with daylight values, chosen by the
  data-theme attribute on <html> — "light", or "system" to follow the reader's operating system.
  Without the attribute, or with "dark", the page is Nocturne. WebApp always writes the attribute and
  draws light unless the reader chose otherwise (ThemeCookie.Default); the admin console never writes
  it, so it stays dark whatever the operator's system prefers. Every token below has a light
  value, and the two light blocks are the same values (NocturnePaletteTests holds both to that).

  The one place light is not dark mirrored: the accent. As a fill it turns pale (accent-deep,
  accent-faded), as text or an edge it turns deep (accent-text, accent-bright), so every pairing a
  component draws — a pale label on a deep chip in the dark, a deep label on a pale chip in the light
  — keeps its contrast without the component knowing which theme it is in.

  --nocturne-danger is the design's one red, for the two controls that delete (ConversationMenu and the
  decision page's Delete) and, since #356, for what the new-session form refuses on Start (NewSession's
  .form-problem and .start-failure) — a line a press left behind has to read as one. Failures of a read
  (ReadFailure, StatePanel) stay neutral grey in both themes; it is not a status colour.

  --nocturne-apple-fill and --nocturne-apple-ink are not Nocturne's: they are Sign in with Apple's button (#307), white
  with black on the dark theme and black with white on the light one, as Apple's Human Interface Guidelines ask of a
  button drawn on the web — never the accent, never outlined like the other providers.

  --nocturne-mark-ink and --nocturne-mark-spark are the product mark's (#397, ClientUi's BrandMark): its ring and small
  spark, and its large spark, as design/"Logos - Link Council AI.dc.html" draws the mark on the ground — pale in the
  dark, deep in the light. The app icons and favicons are files with their own indigo tile, not these.
*/

:root {
    color-scheme: dark;

    --nocturne-ground: #0f1119;
    --nocturne-rail: #14161f;
    --nocturne-surface: #161826;
    --nocturne-raised: #1b1d29;
    --nocturne-raised-alt: #232532;
    --nocturne-line: #3f424d;
    --nocturne-line-soft: #292b31;
    --nocturne-line-mid: #4a4e5c;
    --nocturne-line-strong: #5d5294;
    --nocturne-accent: #9184d9;
    --nocturne-accent-bright: #b5abfc;
    --nocturne-accent-pale: #e7e5fe;
    --nocturne-accent-text: #d2cefd;
    --nocturne-accent-edge: #796cbf;
    --nocturne-accent-deep: #2b2741;
    --nocturne-accent-faded: #4a4270;
    --nocturne-accent-wash: rgba(145, 132, 217, .09);
    --nocturne-accent-wash-strong: rgba(145, 132, 217, .13);
    --nocturne-accent-wash-bold: rgba(145, 132, 217, .2);
    --nocturne-hover-wash: rgba(233, 233, 237, .05);
    --nocturne-text: #e9e9ed;
    --nocturne-text-bright: #cfd3e5;
    --nocturne-text-dim: #b2b6ca;
    --nocturne-text-muted: #9397ab;
    --nocturne-text-faint: #75798c;
    --nocturne-text-faintest: #595d6c;
    --nocturne-shadow: 0 16px 40px rgba(0, 0, 0, .45);
    --nocturne-shadow-panel: 0 10px 30px rgba(0, 0, 0, .35);
    --nocturne-shadow-menu: 0 12px 28px rgba(0, 0, 0, .45);
    --nocturne-shadow-drawer: 16px 0 40px rgba(0, 0, 0, .5);
    --nocturne-scrim: rgba(8, 9, 14, .66);
    --nocturne-scrim-soft: rgba(15, 17, 25, .55);
    --nocturne-glow: rgba(145, 132, 217, .14);
    --nocturne-focus-halo: rgba(145, 132, 217, .1);
    --nocturne-danger: oklch(0.74 0.14 22);
    --nocturne-apple-fill: #ffffff;
    --nocturne-apple-ink: #000000;
    --nocturne-mark-ink: #9184d9;
    --nocturne-mark-spark: #f5f4ff;
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;
}

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

    --nocturne-ground: #f1f2f6;
    --nocturne-rail: #eaecf2;
    --nocturne-surface: #ffffff;
    --nocturne-raised: #f4f5f9;
    --nocturne-raised-alt: #eceef5;
    --nocturne-line: #cdd0da;
    --nocturne-line-soft: #e2e4ea;
    --nocturne-line-mid: #b2b5c2;
    --nocturne-line-strong: #7a6dc0;
    --nocturne-accent: #6658bd;
    --nocturne-accent-bright: #5b4fa6;
    --nocturne-accent-pale: #3f3484;
    --nocturne-accent-text: #5346a0;
    --nocturne-accent-edge: #6658bd;
    --nocturne-accent-deep: #ece9fb;
    --nocturne-accent-faded: #d8d3ef;
    --nocturne-accent-wash: rgba(94, 80, 180, .07);
    --nocturne-accent-wash-strong: rgba(94, 80, 180, .13);
    --nocturne-accent-wash-bold: rgba(94, 80, 180, .18);
    --nocturne-hover-wash: rgba(15, 17, 24, .04);
    --nocturne-text: #14161d;
    --nocturne-text-bright: #262934;
    --nocturne-text-dim: #3b3e4b;
    --nocturne-text-muted: #5c5f70;
    --nocturne-text-faint: #686b7d;
    --nocturne-text-faintest: #8a8d9f;
    --nocturne-shadow: 0 16px 40px rgba(20, 21, 30, .12);
    --nocturne-shadow-panel: 0 10px 30px rgba(20, 21, 30, .08);
    --nocturne-shadow-menu: 0 12px 28px rgba(20, 21, 30, .12);
    --nocturne-shadow-drawer: 16px 0 40px rgba(20, 21, 30, .12);
    --nocturne-scrim: rgba(20, 22, 30, .35);
    --nocturne-scrim-soft: rgba(20, 22, 30, .22);
    --nocturne-glow: rgba(94, 80, 180, .1);
    --nocturne-focus-halo: rgba(94, 80, 180, .16);
    --nocturne-danger: oklch(0.55 0.14 22);
    --nocturne-apple-fill: #000000;
    --nocturne-apple-ink: #ffffff;
    --nocturne-mark-ink: #796cbf;
    --nocturne-mark-spark: #423a6a;
}

@media (prefers-color-scheme: light) {
    :root[data-theme="system"] {
        color-scheme: light;

        --nocturne-ground: #f1f2f6;
        --nocturne-rail: #eaecf2;
        --nocturne-surface: #ffffff;
        --nocturne-raised: #f4f5f9;
        --nocturne-raised-alt: #eceef5;
        --nocturne-line: #cdd0da;
        --nocturne-line-soft: #e2e4ea;
        --nocturne-line-mid: #b2b5c2;
        --nocturne-line-strong: #7a6dc0;
        --nocturne-accent: #6658bd;
        --nocturne-accent-bright: #5b4fa6;
        --nocturne-accent-pale: #3f3484;
        --nocturne-accent-text: #5346a0;
        --nocturne-accent-edge: #6658bd;
        --nocturne-accent-deep: #ece9fb;
        --nocturne-accent-faded: #d8d3ef;
        --nocturne-accent-wash: rgba(94, 80, 180, .07);
        --nocturne-accent-wash-strong: rgba(94, 80, 180, .13);
        --nocturne-accent-wash-bold: rgba(94, 80, 180, .18);
        --nocturne-hover-wash: rgba(15, 17, 24, .04);
        --nocturne-text: #14161d;
        --nocturne-text-bright: #262934;
        --nocturne-text-dim: #3b3e4b;
        --nocturne-text-muted: #5c5f70;
        --nocturne-text-faint: #686b7d;
        --nocturne-text-faintest: #8a8d9f;
        --nocturne-shadow: 0 16px 40px rgba(20, 21, 30, .12);
        --nocturne-shadow-panel: 0 10px 30px rgba(20, 21, 30, .08);
        --nocturne-shadow-menu: 0 12px 28px rgba(20, 21, 30, .12);
        --nocturne-shadow-drawer: 16px 0 40px rgba(20, 21, 30, .12);
        --nocturne-scrim: rgba(20, 22, 30, .35);
        --nocturne-scrim-soft: rgba(20, 22, 30, .22);
        --nocturne-glow: rgba(94, 80, 180, .1);
        --nocturne-focus-halo: rgba(94, 80, 180, .16);
        --nocturne-danger: oklch(0.55 0.14 22);
        --nocturne-apple-fill: #000000;
        --nocturne-apple-ink: #ffffff;
        --nocturne-mark-ink: #796cbf;
        --nocturne-mark-spark: #423a6a;
    }
}