/* Earth2 Recon — design tokens
   Everything in app.css references these; nothing hardcodes a colour.

   The dark theme is a neutral charcoal palette. Colour is reserved: the only
   hues in the interface are the three status colours, so a hue anywhere on a
   page means regulatory state and nothing else. That is the point of it —
   against the previous blue chrome a red pill competed with the furniture;
   against charcoal it is the only thing shouting. */

:root{
  /* The browser's own controls - the date and time popups, spinners and
     scrollbars - are drawn by the platform, not by us. color-scheme is the one
     hook we have: it tells the browser which way round this page is, so the
     native calendar comes up in our theme rather than a white box. */
  color-scheme:light;

  /* Light is the same neutral system inverted, so the two themes are one
     palette rather than two designs. Accent stays grey; the status colours are
     the only hues here as well. */
  --brand-primary:#5a5a5a;
  --brand-primary-hover:#444444;
  --brand-primary-subtle:#ebebeb;
  --on-primary:#ffffff;

  --brand-ink:#1a1a1a;      /* primary text   — 15.9:1 on canvas */
  --brand-text:#4a4a4a;     /* secondary text —  8.6:1 */
  --text-muted:#6e6e6e;     /* labels, units  —  5.1:1 */
  --brand-canvas-dark:#121212;

  /* The sidebar is dark in both themes, so its text cannot use the themed
     tokens — those invert, and dark-on-dark is what you get. Fixed values,
     declared once, outside either theme block. */
  --side-ink:#e0e0e0;
  --side-text:#b0b0b0;
  --side-muted:#888888;

  /* The sidebar's own ground. In light theme it is the dark canvas, which
     already stands well clear of an #f4f4f4 page. In dark theme it cannot be
     that value: --canvas resolves to the same #121212, so sidebar and content
     became one continuous field with no edge between them. Overridden below to
     the same surface the top bar uses, one step above the page. */
  --side-canvas:#121212;

  --border:#d9d9d9;
  --border-strong:#b4b4b4;

  --status-clear:#1a7f5a;   --status-clear-bg:#e9f3ef;
  --status-caution:#8a5d00; --status-caution-bg:#f6f0e4;
  --status-blocked:#b3261e; --status-blocked-bg:#f7eae9;

  --paper:#ffffff;
  --canvas:#f4f4f4;

  --focus-ring:rgb(90 90 90/.35);

  --font-sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-serif:"Merriweather",Georgia,serif;
  --font-mono:"Geist Mono","JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r-sm:3px; --r-md:6px; --r-lg:10px;

  /* Height of the chrome band across the top of the app: the sidebar's brand
     block and the main column's top bar. They sit in different grid columns
     and their rules are 25 lines apart, so left to their own content they
     drift — the brand block is as tall as whatever the logo currently
     measures, the top bar as tall as a breadcrumb and a clock. One token, both
     of them, and the two rules under the logo stay on the same line. */
  --chrome-h:64px;
}

[data-theme=dark]{
  color-scheme:dark;

  /* Accent #888888. On #121212 that is 5.3:1, so it clears AA for body text
     as a link colour, and #121212 on an #888888 button clears it the other
     way round. */
  --brand-primary:#888888;
  --brand-primary-hover:#9c9c9c;
  --brand-primary-subtle:#262626;
  --on-primary:#121212;

  --brand-ink:#e0e0e0;      /* primary text   — 14.3:1 on canvas */
  --brand-text:#b0b0b0;     /* secondary text —  9.0:1 */
  --text-muted:#888888;     /* labels, units  —  5.3:1 */

  --border:#444444;
  --border-strong:#5a5a5a;

  /* Retained deliberately. The glyph carries the state as well (app.js draws
     a tick, a cross or a question mark), because roughly one man in twelve has
     a colour vision deficiency and these screens are read on a tablet in
     sunlight — but a gate result that is only a glyph is a worse control than
     one that is a glyph and a colour. Backgrounds re-mixed towards neutral so
     they sit on charcoal rather than on the old blue. */
  --status-clear:#4cc38a;   --status-clear-bg:#15251e;
  --status-caution:#e0a92b; --status-caution-bg:#282112;
  --status-blocked:#f2685f; --status-blocked-bg:#2c1917;

  --paper:#1c1c1c;          /* card surface, one step above the page */
  --canvas:#121212;         /* page background */

  /* Sidebar sits on the same surface as the top bar, so the chrome reads as
     one L-shape around a recessed content well. Equal to --canvas here would
     make the two halves of the screen indistinguishable. */
  --side-canvas:#1c1c1c;

  --focus-ring:rgb(160 160 160/.45);
}