/* NIL HEARD — the tokens. One definition, every surface, two themes.
 * ---------------------------------------------------------------------------------------
 * Before this file there were four palettes across five surfaces: three near-blacks that
 * were almost but not quite the same, the same amber under two different variable names
 * (`--amber` on the site, `--acc` in the tools) so no stylesheet could be moved between
 * them, and the content-label colours copied verbatim into three places where they could
 * drift. This is the one copy. A second definition of any of it is a test failure.
 *
 * The register was decided by what already ships: the Reception Log's WARM near-black, not
 * the tools' cool one. It is the surface a stranger sees and the only one with a written
 * spec ("the operator's console — near-black, amber, no gradients, no glow"). The tools
 * moved to it, not the other way round. The light theme is the same register on paper:
 * warm off-white, the same amber darkened until it can be read, no blue-grey anywhere.
 *
 * The type is the sleeve's, because the record and its tools should look like one thing:
 * Saira Condensed for anything set large, Martian Mono for anything that is DATA — a
 * frequency, a UTC minute, a sha, a job id. Subset to WOFF2 by ui/build_fonts.py; the
 * @font-face rules are in ui/fonts.css, which a page inlines or links depending on whether
 * it has to survive being opened from file://.
 *
 * TWO THEMES, THREE SETTINGS, ONE DEFINITION
 * ------------------------------------------
 * Dark is the default and the one the record was designed in. Light exists because the
 * console is also read at a desk by a window, and half of this project's text is 11 px
 * data. The setting is `system | dark | light` and lives in ui/theme.js under one key for
 * every tool; it reaches CSS as `data-theme` on <html>, and NOTHING here reads a media
 * query on its own — the three blocks below are:
 *
 *     :root                                     the dark values (also the no-JS default)
 *     @media (prefers-color-scheme: light)      ...following the system, unless pinned
 *       :root:not([data-theme="dark"])
 *     :root[data-theme="light"]                 ...pinned by hand
 *
 * so a surface never has to ask which theme it is in. Every colour a page needs is a token
 * that exists in both; a literal hex in a surface stylesheet is a bug that only shows up
 * in one of the two themes, which is why test_ui.py hunts for them.
 *
 * WHAT THE NAMES MEAN, because picking the wrong one is how a theme breaks:
 *   --amber      the signal colour as a FILL: a chip, a selected button, a playhead.
 *                Light in both themes, so what is drawn on it is --on-accent.
 *   --accent     the signal colour as TEXT or a border on a page surface. In dark these
 *                are the same colour; in light they cannot be — one colour cannot be both
 *                4.5:1 against paper and 4.5:1 against the near-black written on top of it.
 *   --on-accent  the ink for anything sitting on --amber or another bright fill.
 *   --stage      a black the picture supplies: a spectrogram, a waterfall, an artwork
 *                preview. It does not follow the theme, because the image does not.
 */

:root {
  color-scheme: dark;

  /* --- surface ------------------------------------------------------------------- */
  --bg: #0a0a0a;          /* the page */
  --panel: #121110;       /* a card on it */
  --panel2: #1a1816;      /* a card on a card */
  --line: #27241f;        /* a border you should not notice */
  --line2: #3e3931;       /* a border you should */
  --fg: #e2dcd0;          /* text */
  --dim: #a8a094;         /* secondary text */
  --faint: #8b8478;       /* tertiary: timestamps, counts, things you read only if you look */
  --field: #0d0c0b;       /* what you type into */
  --sunken: #0c0b0a;      /* a log, a waveform, anything the page is a window onto */
  --chip: #221f1c;        /* a neutral chip, a progress trough */
  --hover: rgba(255, 255, 255, .05);   /* a row under the pointer */
  --sel: rgba(224, 169, 74, .10);      /* ...and the row you chose */
  --overlay: rgba(6, 6, 6, .80);       /* behind a modal */
  --shadow: rgba(0, 0, 0, .55);
  --stage: #000;          /* a picture's own black — the same in both themes */

  /* --- the one accent ------------------------------------------------------------- */
  --amber: #e0a94a;       /* as a fill. Nothing else is this colour. */
  --accent: #e0a94a;      /* as text or a border */
  --on-accent: #12100c;   /* the ink on top of --amber, which is bright in both themes */
  /* The ink on a STATUS fill — --keep, --kill, --love, --meh. Those invert between the
     themes (a mint green on the console, a bottle green on paper), so their ink inverts
     with them and cannot be --on-accent. */
  --on-fill: #0a0a0a;
  --amber-dark: #b06210;  /* a rule, a quiet border */
  --amber-pale: #ffeabe;  /* over --stage only: a playhead on a spectrogram */
  --tint-amber: rgba(224, 169, 74, .09);
  --tint-keep: rgba(94, 200, 164, .09);
  --tint-kill: rgba(224, 104, 94, .09);
  --warn: #e08a6a;        /* something is wrong but nothing is lost */
  /* A banner that stops the tool working — a schema mismatch, a partial build. It does not
     follow the theme: an alarm that is quieter on paper than on the console is not one. */
  --alarm: #b8352c; --on-alarm: #fff;

  /* --- what a capture contains (analyze.py's vocabulary) ---------------------------
     These are FILLS with their own ink and they do not follow the theme: a content label
     is the same colour on paper as on the console, because it is read beside a waterfall
     that is the same picture either way. --noise/--mixed/--silence are the dark ones and
     carry --label-lift as their ink; the rest carry --on-accent. */
  --voice: #e8c46a; --keyed: #5ec8a4; --morse: #6aa7e8; --carrier: #9aa0b0;
  --data: #c47ae0; --noise: #3a4351; --mixed: #5b6675; --silence: #1c2128;
  --label-lift: #e8e6e2;

  /* --- what a human thought of it -------------------------------------------------- */
  --love: #e0a94a; --keep: #5ec8a4; --meh: #a8a094; --kill: #e0685e;

  /* --- how far something has got ---------------------------------------------------- */
  --todo: #2a2724; --wip: var(--amber); --done: var(--keep); --blocked: var(--kill);
  --skip: var(--faint);

  /* --- what a sketch is made of (the music lab's categories) ------------------------ */
  --pads: #6aa7e8; --rhythm: #e8845a; --bass: #5ec8a4; --combined: #c47ae0;

  /* --- type ------------------------------------------------------------------------- */
  --sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --cond: "NH Cond", "Saira Condensed", "Arial Narrow", "Roboto Condensed", var(--sans);
  --mono: "NH Mono", "Martian Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* The scale. It is a scale and not a set of literals because every surface in this
     repository had its own idea of "small", and the answer to "the type is too small"
     should be one number in one file. --t-body is the page; --t-3xs is the smallest thing
     this project is allowed to set, and it is 11.5 px, not the 9 px that had crept in. */
  --t-lg: 18px;
  --t-body: 16px;
  --t-sm: 14.5px;
  --t-xs: 13.5px;
  --t-2xs: 12.5px;
  --t-3xs: 11.5px;

  /* --- measure ---------------------------------------------------------------------- */
  --maxw: 1180px;
  --player-h: 56px;
  --r: 4px;               /* the one radius */
  --gap: 10px;
}

/* Following the system, and not told otherwise. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --bg: #f5f2eb;
    --panel: #fffdf7;
    --panel2: #ece7dc;
    --line: #dfd8c9;
    --line2: #b9b0a0;
    --fg: #191713;
    --dim: #57524a;
    --faint: #675f55;
    --field: #fffdf7;
    --sunken: #f0ece1;
    --chip: #e4ded1;
    --hover: rgba(0, 0, 0, .045);
    --sel: rgba(138, 83, 0, .10);
    --overlay: rgba(40, 34, 25, .55);
    --shadow: rgba(60, 50, 35, .22);

    --amber: #d99b2f;
    --accent: #8a5300;
    --on-accent: #1b1204;
    --on-fill: #fffdf7;
    --amber-dark: #a86a12;
    --tint-amber: rgba(217, 155, 47, .16);
    --tint-keep: rgba(11, 110, 82, .12);
    --tint-kill: rgba(168, 48, 42, .10);
    --warn: #a3441c;

    --love: #8a5300; --keep: #0b6e52; --meh: #57524a; --kill: #a8302a;
    --todo: #ddd6c7;
    --pads: #1f5fb0; --rhythm: #b04a1c; --bass: #0b6e52; --combined: #7a349a;
  }
}

/* ...or pinned by hand. The same values, because there is one light theme and not two. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f2eb;
  --panel: #fffdf7;
  --panel2: #ece7dc;
  --line: #dfd8c9;
  --line2: #b9b0a0;
  --fg: #191713;
  --dim: #57524a;
  --faint: #675f55;
  --field: #fffdf7;
  --sunken: #f0ece1;
  --chip: #e4ded1;
  --hover: rgba(0, 0, 0, .045);
  --sel: rgba(138, 83, 0, .10);
  --overlay: rgba(40, 34, 25, .55);
  --shadow: rgba(60, 50, 35, .22);

  --amber: #d99b2f;
  --accent: #8a5300;
  --on-accent: #1b1204;
  --on-fill: #fffdf7;
  --amber-dark: #a86a12;
  --tint-amber: rgba(217, 155, 47, .16);
  --tint-keep: rgba(11, 110, 82, .12);
  --tint-kill: rgba(168, 48, 42, .10);
  --warn: #a3441c;

  --love: #8a5300; --keep: #0b6e52; --meh: #57524a; --kill: #a8302a;
  --todo: #ddd6c7;
  --pads: #1f5fb0; --rhythm: #b04a1c; --bass: #0b6e52; --combined: #7a349a;
}