/* The light theme: the second set of every colour token of styles.css, under <html data-theme="light">.
   docs/LANES.md chapter 10. Black stays the default and the brand's face; this sheet does nothing until the theme
   switch (js/theme/switch.js) or js/pre.js sets that attribute, and neither does without data-themes="light" on
   <html>. It never follows the system setting.

   How the set is built:
   - the ground is a warm off-white (--bg), cards are lighter (--bg-2), what is pressed into a card is a shade
     darker (--bg-3);
   - orange FILLS are the same orange with the same near-black text on it (--brand, --on-brand);
   - orange TEXT and links are a deeper orange (--brand-text, --brand-hi), greens, reds and ambers are darker
     (--up, --down, --warn, --heat-3, --heat-4): each reads at 4.5 to 1 or more on the ground;
   - what near-black text sits on keeps the bright colour of black (the -fill tokens);
   - the heat meter keeps its dark ember track (--heat-0) and the coin badge is the same picture (--cb-*).
   tests/site/contrast.test.mjs holds both sets to the numbers.

   Under the tokens: the few things a token cannot say (the wordmark, the QR code, the focus ring, one icon of the
   wallet menu). No rule there names a colour. */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f8f4ec; --bg-2: #fffdfa; --bg-3: #f3eee5; --hover: #ebe4d8; --chip: #ede6da;
  --line: #e4dccf; --line-2: #c4b8a4;
  --text: #1c1611; --muted: #5f574c; --dim: #70675b;
  --brand: #ff6a00; --brand-hi: #a24b00; --brand-deep: #c24a00; --brand-text: #b04000;
  --brand-soft: rgba(255, 106, 0, 0.12); --on-brand: #0b0705;
  --up: #0a7446; --down: #c2114a; --up-soft: rgba(47, 208, 138, 0.16); --down-soft: rgba(255, 61, 113, 0.12);
  --warn: #855b00; --warn-soft: rgba(245, 197, 66, 0.22);
  --heat-0: #3a1108;                      /* still a dark ember: the meter's track is dark on both grounds */
  --heat-1: #ff2a00; --heat-2: #ee5a00; --heat-3: #ad5100; --heat-4: #8a6600;   /* ember, orange, deep amber, dark gold */
  --heat-hot: #8f3000;                    /* the hottest number: the deepest burn, where black has white-hot */
  --glow: 0 0 0 1px rgba(255, 106, 0, 0.35), 0 10px 26px -10px rgba(255, 106, 0, 0.55);

  --scrim: rgba(28, 22, 17, 0.5);
  --shadow-pop: 0 18px 50px -14px rgba(64, 44, 20, 0.38);
  /* the coin badge is a picture: the same eight grounds and the same light letter in both themes */
  --cb-0: #ff7a2e; --cb-0d: #a33a00;
  --cb-1: #f5b83d; --cb-1d: #8a5a0a;
  --cb-2: #e0559b; --cb-2d: #7d2452;
  --cb-3: #9a7bff; --cb-3d: #43299c;
  --cb-4: #4fb6e8; --cb-4d: #17557a;
  --cb-5: #d9d2c5; --cb-5d: #6a645a;
  --cb-6: #ff5a4a; --cb-6d: #8a1f14;
  --cb-7: #c9a26b; --cb-7d: #5e4522;
  --cb-ink: #f2efe9;

  /* a signal colour as a border, a wash or a flash. Borders take the darker colour; washes and flashes the bright one. */
  --brand-a0: rgba(255, 106, 0, 0); --brand-a06: rgba(255, 106, 0, 0.07); --brand-a35: rgba(255, 106, 0, 0.5); --brand-a45: rgba(255, 106, 0, 0.6);
  --brand-a50: rgba(255, 106, 0, 0.6); --brand-a55: rgba(255, 106, 0, 0.6); --brand-a90: rgba(255, 106, 0, 0.6); --brand-hi-a55: rgba(162, 75, 0, 0.5);
  --up-a0: rgba(47, 208, 138, 0); --up-a26: rgba(47, 208, 138, 0.3); --up-a45: rgba(10, 116, 70, 0.45); --up-a55: rgba(47, 208, 138, 0.45);
  --down-a0: rgba(255, 61, 113, 0); --down-a12: rgba(255, 61, 113, 0.12); --down-a26: rgba(255, 61, 113, 0.24); --down-a30: rgba(194, 17, 74, 0.35); --down-a35: rgba(194, 17, 74, 0.4); --down-a45: rgba(194, 17, 74, 0.5);
  --warn-a30: rgba(133, 91, 0, 0.35); --warn-a45: rgba(133, 91, 0, 0.5);
  /* shadows are a warm brown at a third of the strength black needs; the badge's own two stay as they are */
  --shade-a25: rgba(28, 22, 17, 0.14); --shade-a45: rgba(0, 0, 0, 0.45); --shade-a55: rgba(64, 44, 20, 0.28); --shade-a60: rgba(64, 44, 20, 0.16); --shade-a80: rgba(64, 44, 20, 0.3); --shade-a90: rgba(64, 44, 20, 0.3); --shade-a95: rgba(64, 44, 20, 0.32);
  --glint-a10: rgba(255, 255, 255, 0.1); --glint-a12: rgba(28, 22, 17, 0.1); --glint-a14: rgba(255, 255, 255, 0.14); --glint-a22: rgba(255, 255, 255, 0.22);
  --bg-a70: rgba(248, 244, 236, 0.78); --bg-2-a78: rgba(255, 253, 250, 0.78); --bg-2-a94: rgba(255, 253, 250, 0.94);
  /* what near-black text sits on: as bright as in black */
  --up-fill: #2fd08a; --down-fill: #ff3d71; --warn-fill: #f5c542; --brand-hi-fill: #ffa200;
}

/* ---- what a token cannot say ---- */
/* the wordmark: in the top bar's logo link the mark and the drawn word (shown light by a filter) give way to the lead's
   ink lockup. The file is shown as it is: nothing is recoloured or filtered. Only inside .logo: the same mark is also
   the picture of every loading and empty state (ui.js logoMark), and it stays there. */
:root[data-theme="light"] .logo .logo-mark, :root[data-theme="light"] .logo .logo-word { display: none; }
:root[data-theme="light"] .logo .logo-ink { display: block; height: 22px; width: auto; flex: none; }
/* a QR code stays dark on light: black draws it in the page's text colour on the page's ground, which here would turn
   it inside out, and not every wallet reads a code that way round */
:root[data-theme="light"] .pf-qr-bg { fill: var(--bg-2); }
:root[data-theme="light"] .pf-qr-fg { fill: var(--text); }
:root[data-theme="light"] .vault-qr { background: var(--bg-2); }
/* the keyboard's focus ring: black draws it in the fill orange (7 to 1 on black). On off-white that orange is 2.6 to 1,
   under the 3 to 1 a focus ring needs, so here the ring takes the text orange: the page's own ring, and the one a
   board row draws inside itself. Only the colour changes: where black draws no ring, none appears. */
:root[data-theme="light"] :focus-visible, :root[data-theme="light"] .pc-link:focus-visible::after { outline-color: var(--brand-text); }
/* the wallet menu's "unlocked for this session" icon: black draws it in the fill orange, which on a light card is
   2.8 to 1, under the 3 to 1 a meaningful icon needs. Here it takes the text orange, like the ring above. */
:root[data-theme="light"] .wl-state.wl-st-session .ico { color: var(--brand-text); }