/* The one place a colour is defined, for every page monokulo serves: the
   site, the POS terminal and the checkout (`views::theme_tests` fails on a
   colour literal anywhere else, and on a `var(--x)` nothing declares).

   Three layers, each built only from the one above it:
   - palette: the actual colours, one value per theme;
   - roles: what a component paints with (`--chrome-bg`, `--btn-bg`,
     `--table-head-bg` ...). Components read roles, never the palette, so a
     surface can't accidentally flip with the text colour between themes
     (the old nav bar that turned white in dark mode, because it reused
     `--ink` as a background);
   - order states: one colour set per order status, shared by the checkout
     badge, the POS and the dashboard's order lists.

   Contrast is checked by `views::theme_tests` in both themes: 4.5:1 for text,
   3:1 for control borders. Dark mode is its own audited set, not an
   inversion: a soft VS Code "Dark+"-like grey scale rather than near-black
   and near-white, which read as harsh at night. */
:root {
  /* ---- palette ---- */
  --ink: #1a1917;
  --paper: #f4f1ea;
  --paper-raised: #ffffff;
  --surface-sunken: #efeae0;
  --line: #dcd5c7;
  --line-strong: #8c8577;
  --muted: #5a564c;
  --accent: #ff6600;
  --accent-hover: #e85d00;
  --accent-ink: #111111;
  --accent-text: #b34700;
  --brand-orange: #ff6600;
  /* The logo's other two facet oranges and its glint (`--logo-*` below). */
  --brand-orange-warm: #e85d00;
  --brand-orange-deep: #c24e00;
  --brand-glint: #fff3e8;
  --error: #b00020;
  --error-ink: #ffffff;
  --success: #1a7f37;
  --warning: #7d5e00;
  --warning-ink: #ffffff;
  /* The two layers of the admin's stacked resource charts (engine below,
     monokulo above): Okabe-Ito blue and vermillion, told apart with the
     common colour-vision deficiencies, each 3:1 against the card. */
  --chart-engine: #0072b2;
  --chart-monokulo: #c25400;
  /* The engine page's five scanner tiers (docs/engine_visualizer.md): the
     dataviz reference categorical slots, in tier order. Three are under
     3:1 on the card in light mode, so the page names a tier wherever it
     colours one, never colour alone. */
  --viz-tier-chain: #2a78d6;
  --viz-tier-blocks: #eb6834;
  --viz-tier-mempool: #1baf7a;
  --viz-tier-settlement: #eda100;
  --viz-tier-upkeep: #e87ba4;
  /* Fixed in both themes: a QR code stays dark on white to scan, and a
     camera preview sits on black. */
  --qr-bg: #ffffff;
  --media-bg: #000000;

  /* ---- roles ---- */
  /* The app bar: the site nav and the POS top bar. */
  --chrome-bg: var(--paper-raised);
  --chrome-ink: var(--ink);
  --chrome-rule: var(--accent);
  --table-head-bg: var(--surface-sunken);
  --table-head-ink: var(--ink);
  --control-bg: var(--paper-raised);
  --control-border: var(--line-strong);
  --btn-bg: var(--paper-raised);
  --btn-ink: var(--ink);
  --btn-border: var(--line-strong);
  --btn-hover-bg: var(--surface-sunken);
  --btn-hover-border: var(--ink);
  /* The one main action of a form or screen (`.btn-primary`, POS Charge). */
  --btn-primary-bg: var(--accent);
  --btn-primary-hover: var(--accent-hover);
  --btn-primary-ink: var(--accent-ink);
  /* The admin settings page's cards (a group of settings saved together):
     the card, its edge, the edge of one with unsaved changes or that a
     save refused; the save bar at the bottom of the window; and the toast
     a save leaves, which floats over the page. */
  --card-bg: var(--paper-raised);
  --card-border: var(--line);
  --card-changed: var(--accent-text);
  --card-failed: var(--error);
  --save-bar-bg: var(--chrome-bg);
  --save-bar-rule: var(--accent);
  --toast-bg: var(--paper-raised);
  --toast-shadow: color-mix(in srgb, var(--ink) 18%, transparent);
  /* The admin settings tab bar: the rule under the open tab, and the dot
     on a tab that needs attention (it also says so in words). */
  --tab-current: var(--accent-text);
  --tab-marker: var(--warning);
  /* Orange as a ring must clear 3:1 against the page; the brand orange is
     2.6:1 on paper, so the ring takes the orange used for text. */
  --focus-ring: var(--accent-text);
  /* The one destructive action of a page (Delete wallet). */
  --btn-danger-bg: var(--error);
  --btn-danger-ink: var(--error-ink);
  /* The setup steps (Store, Wallet, Done): the step you are on, and the
     ones done. */
  --step-current-bg: var(--accent);
  --step-current-ink: var(--accent-ink);
  --step-done-bg: var(--ink);
  --step-done-ink: var(--paper-raised);
  /* The Wallet step's own small steps (Kind, Back up, Check): a done one is
     green, its edge and the line to the next in the success colour, on the
     success tint, with ink text. */
  --step-done-ok: var(--success);
  --step-done-ok-bg: var(--tint-success);
  /* The engine page's chain strip: a recorded block, its edge, a block
     held in the scan's cache, the mark of something saved to disk, and the
     next block: filled by the node's pool, up to the penalty zone. */
  --viz-cell-recorded: var(--surface-sunken);
  --viz-cell-edge: var(--line-strong);
  --viz-cell-cached: color-mix(in srgb, var(--viz-tier-blocks) 22%, var(--paper-raised));
  --viz-saved: var(--ink);
  --viz-pool-fill: color-mix(in srgb, var(--viz-tier-chain) 75%, var(--paper-raised));
  --viz-penalty: var(--error);
  /* The status page's proof-of-work window: a proven block filled, one
     only seen outlined, one below the anchor a faint well; the block
     orders settle up to ringed, and the node tip's bar. A node's verdict
     dot takes the status colours. */
  --pow-proven: var(--chart-engine);
  --pow-seen-edge: var(--line-strong);
  --pow-before: var(--surface-sunken);
  --pow-mark: var(--ink);
  --pow-verdict-ok: var(--success);
  --pow-verdict-watch: var(--warning);
  --pow-verdict-bad: var(--error);
  --pow-verdict-quiet: var(--muted);

  /* Soft backgrounds for messages, mixed from the colours above so a status
     colour and its tint can't drift apart. Ink on any tint clears 4.5:1;
     success-coloured text on `--tint-success` does not, and nothing does it. */
  --tint-success: color-mix(in srgb, var(--success) 14%, var(--paper-raised));
  --tint-error: color-mix(in srgb, var(--error) 14%, var(--paper-raised));
  --tint-warning: color-mix(in srgb, var(--warning) 14%, var(--paper-raised));
  --tint-neutral: color-mix(in srgb, var(--muted) 12%, var(--paper-raised));
  --tint-highlight: color-mix(in srgb, var(--brand-orange) 20%, var(--paper-raised));
  /* A Monero network's badge (`views::network_badge`): mainnet, real
     money, in the brand's orange tint with a solid edge; a test network in
     a neutral tint with a dashed edge (`site.css`). Not the warning amber
     or the error red: a test network is play money, not a problem. */
  --network-ink: var(--ink);
  --network-main-bg: var(--tint-highlight);
  --network-main-edge: var(--accent-text);
  --network-test-bg: var(--tint-neutral);
  --network-test-edge: var(--line-strong);
  /* A clickable row under the pointer (lighter than `--surface-sunken`, so a
     bar drawn on that track stays readable), and the dim behind a dialog. */
  --tint-hover: color-mix(in srgb, var(--brand-orange) 5%, var(--paper-raised));
  --scrim: color-mix(in srgb, var(--ink) 65%, transparent);
  /* A dropdown's list (the Select): the one thing that floats over the
     page, so the one shadow, mixed from the text colour for either theme. */
  --popup-shadow: color-mix(in srgb, var(--ink) 18%, transparent);
  /* An on/off switch: the primary orange when on, a plain line when off. */
  --switch-on: var(--accent);
  --switch-off: var(--line-strong);
  --switch-knob: var(--paper-raised);
  /* The logo's facets (`views::logo_mark`, the POS loading mark): the
     same oranges in both themes, only its lines follow the text colour. */
  --logo-facet-mid: var(--brand-orange);
  --logo-facet-warm: var(--brand-orange-warm);
  --logo-facet-deep: var(--brand-orange-deep);
  --logo-glint: var(--brand-glint);

  /* ---- order states (`.state-*` in site.css) ---- */
  --state-pending-bg: #fff6d8; --state-pending-border: #ac7600; --state-pending-ink: #634800;
  --state-unconfirmed-bg: #f0f0ff; --state-unconfirmed-border: #7779bb; --state-unconfirmed-ink: #353683;
  --state-confirming-bg: #e7e8ff; --state-confirming-border: #5556a4; --state-confirming-ink: #353683;
  --state-partial-bg: #fff0df; --state-partial-border: #c05e00; --state-partial-ink: #8a3900;
  --state-paid-bg: #e3f4e7; --state-paid-border: #1a7f37; --state-paid-ink: #165f2e;
  --state-overpaid-bg: #ffe6d9; --state-overpaid-border: #b54016; --state-overpaid-ink: #912e0c;
  --state-expired-bg: #ece9e3; --state-expired-border: #625b52; --state-expired-ink: #4e4943;
  --state-double-spend-bg: #ffe6e9; --state-double-spend-border: #b00020; --state-double-spend-ink: #870019;
  --state-cancelled-bg: #e7e7e7; --state-cancelled-border: #616161; --state-cancelled-ink: #404040;

  /* ---- shape and type (the same in both themes) ----
     Monero classic, tuned: 1x density, 10% roundedness, 0% elevation. Space
     and radius are px so control chrome keeps one rhythm whatever the text
     size; typographic margins stay in em/rem. At 0% elevation the ambient
     shadow is fully transparent, so flat really is flat. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  /* Badge and step captions on a touch screen's dense rows. */
  --text-2xs: 0.625rem;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-2xl: 2rem;
  --text-display: 3rem;
  /* A touch screen's large figures between the text sizes and the display:
     amounts, keypad digits (the POS). */
  --text-display-sm: 1.375rem;
  --text-display-md: 1.75rem;
  --text-display-lg: 2.25rem;
  --leading-body: 1.5;
  --leading-heading: 1.2;
  /* Inside a pill or chip (`.tag`, `.badge`, the wallet step's pills, the
     network badge, ...): the padding for one holding only words, and a
     roomier step for one holding an icon, a number circle, a badge or a logo
     beside its words. In em, so a pill keeps its shape at any text size.
     `views::theme_tests` fails on a pill or chip padded any other way. */
  --pill-pad-y: 0.15em;
  --pill-pad-x: 0.7em;
  --pill-pad-y-roomy: 0.25em;
  --pill-pad-x-roomy: 0.85em;
  --pill-gap: 0.35em;
  --radius-sm: 5px;
  --radius-md: 9px;
  --radius-lg: 16px;
  --shadow-ambient-y: 0px;
  --shadow-ambient-blur: 0px;
  --shadow-ambient: rgba(17, 17, 17, 0);
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

  /* The browser's own parts of a control (a number box's step arrows, a
     select's list, scroll bars) follow the theme in use, which the account
     may have chosen against the OS preference: dark only in the blocks
     below. */
  color-scheme: light;
}
/* Dark: the OS preference, unless the account chose light. The two dark
   blocks must stay identical (`views::theme_tests` checks). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #d4d4d4;
    --paper: #1e1e1e;
    --paper-raised: #2a2a2a;
    --surface-sunken: #333333;
    --line: #3d3d3d;
    --line-strong: #7a7a7a;
    --muted: #9d9d9d;
    --accent-hover: #ff7a1f;
    --accent-text: #ff8a3d;
    --error: #ff6b6b;
    --error-ink: #111111;
    --success: #4cc27a;
    --warning: #e0a83d;
    --warning-ink: #111111;
    --chart-engine: #56b4e9;
    --chart-monokulo: #e69f00;
    --viz-tier-chain: #3987e5;
    --viz-tier-blocks: #d95926;
    --viz-tier-mempool: #199e70;
    --viz-tier-settlement: #c98500;
    --viz-tier-upkeep: #d55181;
    --chrome-bg: #181818;
    --scrim: color-mix(in srgb, var(--chrome-bg) 85%, transparent);
  color-scheme: dark;
    color-scheme: dark;
    --state-pending-bg: #3a3017; --state-pending-border: #c99a2e; --state-pending-ink: #f2d487;
    --state-unconfirmed-bg: #272842; --state-unconfirmed-border: #8d8fe0; --state-unconfirmed-ink: #c9caff;
    --state-confirming-bg: #272842; --state-confirming-border: #8d8fe0; --state-confirming-ink: #c9caff;
    --state-partial-bg: #3d2a17; --state-partial-border: #e08a3a; --state-partial-ink: #ffcf9e;
    --state-paid-bg: #17331f; --state-paid-border: #4cc27a; --state-paid-ink: #a8e6bd;
    --state-overpaid-bg: #3d2117; --state-overpaid-border: #e5794e; --state-overpaid-ink: #ffc2a8;
    --state-expired-bg: #2e2d2b; --state-expired-border: #9a948b; --state-expired-ink: #d6d1c8;
    --state-double-spend-bg: #3d1a1f; --state-double-spend-border: #ff6b6b; --state-double-spend-ink: #ffb3bc;
    --state-cancelled-bg: #2e2d2b; --state-cancelled-border: #9a948b; --state-cancelled-ink: #d6d1c8;
  }
}
/* Dark: the account's own choice (`data-theme="dark"` on <html>), which wins
   over the OS preference. */
:root[data-theme="dark"] {
  --ink: #d4d4d4;
  --paper: #1e1e1e;
  --paper-raised: #2a2a2a;
  --surface-sunken: #333333;
  --line: #3d3d3d;
  --line-strong: #7a7a7a;
  --muted: #9d9d9d;
  --accent-hover: #ff7a1f;
  --accent-text: #ff8a3d;
  --error: #ff6b6b;
  --error-ink: #111111;
  --success: #4cc27a;
  --warning: #e0a83d;
  --warning-ink: #111111;
  --chart-engine: #56b4e9;
  --chart-monokulo: #e69f00;
  --viz-tier-chain: #3987e5;
  --viz-tier-blocks: #d95926;
  --viz-tier-mempool: #199e70;
  --viz-tier-settlement: #c98500;
  --viz-tier-upkeep: #d55181;
  --chrome-bg: #181818;
  --scrim: color-mix(in srgb, var(--chrome-bg) 85%, transparent);
  color-scheme: dark;
  --state-pending-bg: #3a3017; --state-pending-border: #c99a2e; --state-pending-ink: #f2d487;
  --state-unconfirmed-bg: #272842; --state-unconfirmed-border: #8d8fe0; --state-unconfirmed-ink: #c9caff;
  --state-confirming-bg: #272842; --state-confirming-border: #8d8fe0; --state-confirming-ink: #c9caff;
  --state-partial-bg: #3d2a17; --state-partial-border: #e08a3a; --state-partial-ink: #ffcf9e;
  --state-paid-bg: #17331f; --state-paid-border: #4cc27a; --state-paid-ink: #a8e6bd;
  --state-overpaid-bg: #3d2117; --state-overpaid-border: #e5794e; --state-overpaid-ink: #ffc2a8;
  --state-expired-bg: #2e2d2b; --state-expired-border: #9a948b; --state-expired-ink: #d6d1c8;
  --state-double-spend-bg: #3d1a1f; --state-double-spend-border: #ff6b6b; --state-double-spend-ink: #ffb3bc;
  --state-cancelled-bg: #2e2d2b; --state-cancelled-border: #9a948b; --state-cancelled-ink: #d6d1c8;
}