/* The design token values -- the one place a custom property gets declared
   under web/ (issue #72, decisions/0019-*.md). Linked by both Vite build
   entries the same way they already link /fonts/fonts.css: index.html for
   the console, login.html for the static sign-in page that has to exist
   before the console's own bundle ever loads. Neither file may re-declare
   any of these locally -- TestDesignTokensHaveOneHome (tokens_test.go, repo
   root) fails the build if one does.

   This file is the *values*. src/console.css's header comment stays the
   authority on what each one is allowed to *mean* -- the green rule, the
   two things --amber carries -- read that before changing what a colour is
   used for. A new token belongs here, not in a page-local <style> block. */

:root {
  /* Surfaces. Near-black, but not one flat black: the chrome (topbar) and
     the composer sit fractionally lighter than the page so the shell reads
     as layered without needing a border to say so. */
  --bg: #06090a;
  --bg-chrome: #080c0d;
  --bg-raised: #0b1011;
  /* One shade above --bg-raised -- the placement picker's own popover
     surface (DR-0006, DR-0020, issue #38), matching the mockup's #0d1213.
     Nothing else needs a fourth surface tone today; add here, not inline,
     if that changes (TestDesignTokensHaveOneHome). */
  --bg-pop: #0d1213;

  /* The two meaning-bearing colours. See console.css's header comment for
     what each one is allowed to say -- --amber carries both "this turn
     failed" and, from issue #38 onward, "this turn left the building". */
  --green: #43ffb0;
  --green-dim: rgba(67, 255, 176, 0.55);
  --green-line: rgba(67, 255, 176, 0.35);
  --green-wash: rgba(67, 255, 176, 0.08);
  --amber: #ffb84d;
  --amber-line: rgba(255, 184, 77, 0.35);
  --amber-wash: rgba(255, 184, 77, 0.08);

  /* Text on a green fill -- the send button, and anything else that ever
     inverts. Not black: it keeps a trace of the green it sits on. */
  --ink: #04150e;

  --text: #eef4f2;
  --text-dim: rgba(238, 244, 242, 0.55);
  --text-faint: rgba(238, 244, 242, 0.35);
  --text-ghost: rgba(238, 244, 242, 0.28);

  /* Structural rules, neutral by decision (console.css's header comment).
     --line divides the shell, --line-soft divides inside a surface,
     --line-strong outlines something raised off the page. */
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.06);
  --line-strong: rgba(255, 255, 255, 0.12);
  --panel-bg: rgba(255, 255, 255, 0.02);

  /* RGB triplets for the one-off washes, hovers and shadows that keep
     their own alpha at the call site, as rgba(var(--fg-rgb), 0.05)
     (decisions/0081-*.md point 5). --fg-rgb is the neutral that lifts a
     surface off the page: white on dark, ink on light. --shadow-scale
     lightens every shadow at once without touching each alpha, and
     --text-alpha-scale strengthens every one-off text grey the same way, so
     the light theme clears AA where dark keeps its faint greys. */
  --fg-rgb: 255, 255, 255;
  --text-rgb: 238, 244, 242;
  --green-rgb: 67, 255, 176;
  --shadow-rgb: 0, 0, 0;
  --shadow-scale: 1;
  --text-alpha-scale: 1;
  --scrim: rgba(4, 6, 7, 0.55);

  /* login.html and setup.html's rejected-form line. Deliberately not
     --amber: those pages have no placement vocabulary (console.css's
     header comment). */
  --form-error: #ff6b6b;

  color-scheme: dark;
}

/* The light theme (decisions/0081-*.md, issue #375). /theme.js sets
   data-theme on <html> before first paint, from the member's stored choice
   or the OS setting. Same meanings, different values: --green and --amber
   are darkened to clear 5:1 on these surfaces rather than replaced, and
   the text greys are stronger than dark's, because the request came from a
   reader who finds low contrast hard. */
:root[data-theme="light"] {
  --bg: #f6f8f7;
  --bg-chrome: #eef2f0;
  --bg-raised: #ffffff;
  --bg-pop: #ffffff;

  --green: #0a7a4e;
  --green-dim: rgba(10, 122, 78, 0.7);
  --green-line: rgba(10, 122, 78, 0.4);
  --green-wash: rgba(10, 122, 78, 0.08);
  --amber: #9a5a00;
  --amber-line: rgba(154, 90, 0, 0.4);
  --amber-wash: rgba(154, 90, 0, 0.08);

  --ink: #f4fffa;

  --text: #141b19;
  --text-dim: rgba(20, 27, 25, 0.72);
  --text-faint: rgba(20, 27, 25, 0.62);
  --text-ghost: rgba(20, 27, 25, 0.5);

  --line: rgba(20, 27, 25, 0.12);
  --line-soft: rgba(20, 27, 25, 0.08);
  --line-strong: rgba(20, 27, 25, 0.2);
  --panel-bg: rgba(20, 27, 25, 0.02);

  --fg-rgb: 20, 27, 25;
  --text-rgb: 20, 27, 25;
  --green-rgb: 10, 122, 78;
  --shadow-rgb: 20, 34, 30;
  --shadow-scale: 0.3;
  --text-alpha-scale: 1.4;
  --scrim: rgba(20, 27, 25, 0.3);

  --form-error: #b42318;

  color-scheme: light;
}