/*
 * Every colour lives here as a custom property named for its role. No colour
 * literal belongs in another stylesheet or in JavaScript — the one exception is
 * the QR code, which is handed explicit colours because `src/lib/qr.js` has no
 * DOM access by design and cannot read a variable.
 *
 * ## Dark is the default here, unlike the sister projects
 *
 * ScanBoxFE and CasaFluxFE define light on bare `:root` and dark under a media
 * query, because they are daytime applications looked at for a long time. This
 * screen is met for fifteen seconds in the middle of doing something else, very
 * often at night, and a flash of white is the whole of the user's impression of
 * it (SPEC.md §How it looks, AF-VIS-002).
 *
 * So dark is on bare `:root` and needs no media query to apply, and light is
 * defined twice: under `prefers-color-scheme: light` guarded against an explicit
 * dark choice, and under an explicit light choice. First paint follows the OS
 * with no script, and an explicit choice still wins.
 *
 * The light theme is a design, not an inversion (AF-VIS-001). Its ground is a
 * cool near-white with the same blue cast as the dark theme's near-black, and
 * its accent is darkened rather than reused, because the accent that reads as
 * luminous on near-black reads as washed out on white.
 *
 * ## One accent, and it is only ever two things
 *
 * The primary action, and focus (AF-VIS-003). Every other colour here is a
 * neutral or a state. Two accents is one accent and a decoration, and this
 * screen has no room for decoration.
 */

:root {
  color-scheme: dark;

  /* The ground. Near-black with a blue cast rather than a neutral grey: the
     cast is what stops a dark interface reading as switched-off, and it is
     what the accent's glow sits inside without looking pasted on. */
  --page-bg: #0a0d14;
  --page-bg-deep: #05070b;
  --panel-bg: #11151f;
  --panel-bg-raised: #161b28;

  /* The panel's edge is a light source, not a border (SPEC.md §How it looks).
     A single hairline at low opacity, brighter along the top where the
     notional light is. */
  --panel-edge: rgb(255 255 255 / 0.07);
  --panel-edge-top: rgb(255 255 255 / 0.13);
  --panel-shadow: rgb(0 0 0 / 0.55);

  --field-bg: #0d111a;
  --field-border: #232b3b;
  --field-border-hover: #303a4f;

  --text: #e8ecf4;
  --text-dim: #9aa4b8;
  --text-faint: #667186;

  /* The one accent. A cool cyan-blue: it is the colour of an instrument
     readout rather than of a brand, which is the "high-tech means precise, not
     decorated" line in SPEC.md §How it looks made concrete. */
  --accent: #4da3ff;
  --accent-bright: #7cbcff;
  --accent-text: #04101f;
  --accent-soft: rgb(77 163 255 / 0.14);
  --accent-line: rgb(77 163 255 / 0.34);
  --accent-glow: rgb(77 163 255 / 0.20);

  --danger: #ff6b6b;
  --danger-soft: rgb(255 107 107 / 0.12);
  --danger-line: rgb(255 107 107 / 0.32);

  --notice: #ffc46b;
  --notice-soft: rgb(255 196 107 / 0.10);
  --notice-line: rgb(255 196 107 / 0.28);

  --ok: #5fd39a;
  --ok-soft: rgb(95 211 154 / 0.12);
  --ok-line: rgb(95 211 154 / 0.30);

  /* The QR code is always drawn light-on-dark-free: a scanner wants a light
     quiet zone and dark modules, and inverting it for the dark theme makes it
     read intermittently on phones that expect the usual polarity. So it keeps
     its own near-white ground in both themes and is given a soft edge to sit
     against the panel rather than glare out of it. */
  --qr-light: #f2f5fa;
  --qr-dark: #05070b;

  --focus-ring: var(--accent);

  /* The faint grid behind everything. Two hairlines, spaced widely enough to
     read as a substrate rather than as graph paper. It is the only ornament in
     the design and is nearly invisible by intention — SPEC.md forbids a
     background image and an animated gradient, not a texture. */
  --grid-line: rgb(255 255 255 / 0.022);
}

/* Light, following the OS, unless an explicit dark choice overrides it. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    color-scheme: light;

    --page-bg: #eef1f6;
    --page-bg-deep: #e3e8f0;
    --panel-bg: #ffffff;
    --panel-bg-raised: #f7f9fc;

    --panel-edge: rgb(16 26 45 / 0.09);
    --panel-edge-top: rgb(255 255 255 / 0.9);
    --panel-shadow: rgb(16 26 45 / 0.10);

    --field-bg: #f7f9fc;
    --field-border: #d3dae6;
    --field-border-hover: #b9c3d4;

    --text: #101828;
    --text-dim: #4a5568;
    --text-faint: #77839a;

    /* Darkened, not reused. The dark theme's accent has a luminance that reads
       as lit against near-black and as washed out against white; this one
       carries the same hue at a contrast that holds against the light ground
       (AF-VIS-015). */
    --accent: #1668d8;
    --accent-bright: #0f52ad;
    --accent-text: #ffffff;
    --accent-soft: rgb(22 104 216 / 0.09);
    --accent-line: rgb(22 104 216 / 0.30);
    --accent-glow: rgb(22 104 216 / 0.13);

    --danger: #c02626;
    --danger-soft: rgb(192 38 38 / 0.07);
    --danger-line: rgb(192 38 38 / 0.26);

    --notice: #92600a;
    --notice-soft: rgb(146 96 10 / 0.08);
    --notice-line: rgb(146 96 10 / 0.24);

    --ok: #12805a;
    --ok-soft: rgb(18 128 90 / 0.08);
    --ok-line: rgb(18 128 90 / 0.26);

    --grid-line: rgb(16 26 45 / 0.030);
  }
}

/* An explicit light choice wins over the OS in either direction. */
:root[data-theme='light'] {
  color-scheme: light;

  --page-bg: #eef1f6;
  --page-bg-deep: #e3e8f0;
  --panel-bg: #ffffff;
  --panel-bg-raised: #f7f9fc;

  --panel-edge: rgb(16 26 45 / 0.09);
  --panel-edge-top: rgb(255 255 255 / 0.9);
  --panel-shadow: rgb(16 26 45 / 0.10);

  --field-bg: #f7f9fc;
  --field-border: #d3dae6;
  --field-border-hover: #b9c3d4;

  --text: #101828;
  --text-dim: #4a5568;
  --text-faint: #77839a;

  --accent: #1668d8;
  --accent-bright: #0f52ad;
  --accent-text: #ffffff;
  --accent-soft: rgb(22 104 216 / 0.09);
  --accent-line: rgb(22 104 216 / 0.30);
  --accent-glow: rgb(22 104 216 / 0.13);

  --danger: #c02626;
  --danger-soft: rgb(192 38 38 / 0.07);
  --danger-line: rgb(192 38 38 / 0.26);

  --notice: #92600a;
  --notice-soft: rgb(146 96 10 / 0.08);
  --notice-line: rgb(146 96 10 / 0.24);

  --ok: #12805a;
  --ok-soft: rgb(18 128 90 / 0.08);
  --ok-line: rgb(18 128 90 / 0.26);

  --grid-line: rgb(16 26 45 / 0.030);
}