/* Colour and glow, 2026-11-11 (saas/DESIGN.md, "Colour and glow"): the tokens of the five accents, of the glow card and of the glossy
   buttons, for the night and the light theme. Loaded after theme-a.css by the site (and by the app from the next round); it reads no
   token and sets no rule on any element except the accent switch at its end, so loading it changes nothing by itself.

   The five accents, each with one job (decision 2; colour means something, it is never only decoration):
     emerald  the brand, the primary action, "up / healthy" (the theme's mint: --primary-ink, --ok)
     indigo   response time and performance
     cyan     the network: DNS, domains, certificates, the API
     fuchsia  security and change (what changed, deploys, the AI security check)
     amber    attention: alerts waiting, slow, a plan limit reached (the theme's warning: --warn-ink)
   Rose and red are "down" and destructive only (--fail): never an accent.

   Per accent: --acc-<name>      icons and words; 4.5:1 or more on the page and on a card in its theme (measured: DESIGN.md's table,
                                 tests/test_colour_glow_2026_11_11.py)
               --acc-<name>-rgb  "r, g, b" for glows and tints: rgba(var(--acc-<name>-rgb), 0.14). In the night it is the ink itself;
                                 on white it is the hue's mid tone, because a dark ink does not glow.
   An accent is never the only signal: its icon and its words say the same thing (the set is at the colour-blind floor, not above it).

   How a thing takes an accent: data-accent="emerald|indigo|cyan|fuchsia|amber" on it or on a parent sets --acc and --acc-rgb, and
   whatever is inside reads those two (the glow card's light, .acc-ink, .acc-tile, the live pieces of glow.css). Without the attribute
   everything reads the emerald.

   The modes follow theme-a.css exactly: light on :root and .chapter-light, night under the system's choice unless data-theme="light",
   under data-theme="dark" and on .chapter-dark. */

/* ==== light ==== */
:root, .chapter-light {
  --acc-emerald: #0a7a47;  --acc-emerald-rgb: 14, 159, 94;
  --acc-indigo: #4f46e5;   --acc-indigo-rgb: 99, 102, 241;
  --acc-cyan: #004559;     --acc-cyan-rgb: 8, 145, 178;
  --acc-fuchsia: #a21caf;  --acc-fuchsia-rgb: 192, 38, 211;
  --acc-amber: #8a5a00;    --acc-amber-rgb: 201, 145, 20;
  /* the glow card (glow.css): its face, its dim 1 px edge, the grid's lines, the light's strength on the edge and inside */
  --glow-face: #ffffff;
  --glow-line: #e6e6e8;
  --glow-grid: rgba(0, 0, 0, 0.07);
  --glow-ring: 0.95;
  --glow-spot: 0.1;
  --glow-still: 0.55;      /* the accent on the edge of a card that does not move (reduced motion) */
  /* the glossy buttons (decision 5): a fill that rises to a deeper top, a lighter 1 px edge, a soft shadow in the fill's colour */
  --gloss-primary-bg: linear-gradient(to top, #51f0a8, #2fdc90);
  --gloss-primary-bg-hover: linear-gradient(to top, #6ff4b8, #45e39f);
  --gloss-primary-edge: #0e9f5e;    /* on white a lighter edge cannot be seen: the mint's deep step (3.4:1) draws the button, the top highlight is the gloss */
  --gloss-primary-ink: #000000;
  --gloss-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 10px 20px -8px rgba(14, 159, 94, 0.55), 0 2px 5px -2px rgba(14, 159, 94, 0.4);
  --gloss-neutral-bg: linear-gradient(to top, #f0f0f1, #ffffff);
  --gloss-neutral-bg-hover: linear-gradient(to top, #e8e8ea, #fafafa);
  --gloss-neutral-edge: #dadadd;
  --gloss-neutral-ink: #000000;
  --gloss-neutral-shadow: inset 0 1px 0 #ffffff, 0 10px 20px -10px rgba(0, 0, 0, 0.22), 0 1px 2px rgba(0, 0, 0, 0.06);
}

/* ==== night ==== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --acc-emerald: #51f0a8;  --acc-emerald-rgb: 81, 240, 168;
    --acc-indigo: #7263fd;   --acc-indigo-rgb: 114, 99, 253;
    --acc-cyan: #0da2c6;     --acc-cyan-rgb: 13, 162, 198;
    --acc-fuchsia: #d673fb;  --acc-fuchsia-rgb: 214, 115, 251;
    --acc-amber: #f5c451;    --acc-amber-rgb: 245, 196, 81;
    --glow-face: #0a0a0a;
    --glow-line: #252527;
    --glow-grid: rgba(255, 255, 255, 0.08);
    --glow-ring: 0.95;
    --glow-spot: 0.14;
    --glow-still: 0.5;
    --gloss-primary-edge: #8df6c9;
    --gloss-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px -8px rgba(81, 240, 168, 0.5), 0 2px 6px -2px rgba(81, 240, 168, 0.35);
    --gloss-neutral-bg: linear-gradient(to top, #161718, #3f4043);
    --gloss-neutral-bg-hover: linear-gradient(to top, #1e1f21, #4b4c50);
    --gloss-neutral-edge: #4b4c50;
    --gloss-neutral-ink: #f0f0f0;
    --gloss-neutral-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 20px -10px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"], .chapter-dark {
  --acc-emerald: #51f0a8;  --acc-emerald-rgb: 81, 240, 168;
  --acc-indigo: #7263fd;   --acc-indigo-rgb: 114, 99, 253;
  --acc-cyan: #0da2c6;     --acc-cyan-rgb: 13, 162, 198;
  --acc-fuchsia: #d673fb;  --acc-fuchsia-rgb: 214, 115, 251;
  --acc-amber: #f5c451;    --acc-amber-rgb: 245, 196, 81;
  --glow-face: #0a0a0a;
  --glow-line: #252527;
  --glow-grid: rgba(255, 255, 255, 0.08);
  --glow-ring: 0.95;
  --glow-spot: 0.14;
  --glow-still: 0.5;
  --gloss-primary-edge: #8df6c9;
  --gloss-primary-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 24px -8px rgba(81, 240, 168, 0.5), 0 2px 6px -2px rgba(81, 240, 168, 0.35);
  --gloss-neutral-bg: linear-gradient(to top, #161718, #3f4043);
  --gloss-neutral-bg-hover: linear-gradient(to top, #1e1f21, #4b4c50);
  --gloss-neutral-edge: #4b4c50;
  --gloss-neutral-ink: #f0f0f0;
  --gloss-neutral-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 10px 20px -10px rgba(0, 0, 0, 0.9);
}

/* ==== the accent switch: the attribute names the accent, what is inside reads --acc and --acc-rgb ==== */
[data-accent="emerald"] { --acc: var(--acc-emerald); --acc-rgb: var(--acc-emerald-rgb); }
[data-accent="indigo"] { --acc: var(--acc-indigo); --acc-rgb: var(--acc-indigo-rgb); }
[data-accent="cyan"] { --acc: var(--acc-cyan); --acc-rgb: var(--acc-cyan-rgb); }
[data-accent="fuchsia"] { --acc: var(--acc-fuchsia); --acc-rgb: var(--acc-fuchsia-rgb); }
[data-accent="amber"] { --acc: var(--acc-amber); --acc-rgb: var(--acc-amber-rgb); }

/* an icon or a few words in the accent; an icon's square tile in its tint (the icon on it keeps 3:1, so words in the accent stand on
   the card, not on a tile) */
.acc-ink { color: var(--acc, var(--acc-emerald)); }
.acc-tile { background: rgba(var(--acc-rgb, var(--acc-emerald-rgb)), 0.12); box-shadow: inset 0 0 0 1px rgba(var(--acc-rgb, var(--acc-emerald-rgb)), 0.28);
  color: var(--acc, var(--acc-emerald)); }