/*
 * Technical Blog Design System: tokens.
 *
 * The one colour and shape source for the standalone explainer blogs:
 * rate-limiting-guide.html (where the system was built), http-query-method.html,
 * web-image-formats-explained.html and watts-decoded.html.
 *
 * Four colours carry the whole system:
 *   #E63946 red · #F1FAEE mist · #1D3557 navy · #A8DADC sky
 * Light mode is navy ink on a mist ground; dark mode keeps the same colours
 * and inverts the grounds to deep navy.
 *
 * Each blog inlines this block at the top of its <style> so it stays a single
 * self-contained file (they open in a new tab and render offline). When a value
 * changes here, copy the block into every blog listed above. A new blog can
 * link it instead:
 *   <link rel="stylesheet" href="./theme/palette.css">
 *
 * Every swatch, with its hex and token name, is on ./palette.html.
 */

/* ── Light ─────────────────────────────────────────────────────────────── */
:root{
  /* Ground and text */
  --bg:#F1FAEE;
  --surface:#FFFFFF;
  --surface-2:#E8F1E5;
  --surface-3:#D6E1D3;
  --ink:#1D3557;
  --ink-2:#44597A;
  --ink-3:#5F7190;
  --line:rgba(29,53,87,0.18);
  --line-2:rgba(29,53,87,0.09);

  /* Red accent, sky second accent, navy */
  --accent:#E63946;
  --accent-strong:#B51F2C;
  --accent-deep:#D62F3C;
  --accent-soft:#FDE7E8;
  --accent-line:#F2A6AC;
  --on-accent:#FFFFFF;
  --accent-2:#A8DADC;
  --accent-2-soft:#E0F2F3;
  --navy:#1D3557;
  --art-a:#1D3557;
  --focus-ring:var(--accent-strong);

  /* Status */
  --ok:#2F7A4A;--ok-soft:#E1F1E6;
  --warn:#8A6100;--warn-soft:#FBF1D6;
  --danger:#B3261E;--danger-soft:#FBE4E2;

  /* Code windows: dark text on white in light mode */
  --code-bg:#FFFFFF;--code-bar:#E8F1E5;--code-ink:#1D3557;
  --code-comment:#5F7190;--code-string:#2F7A4A;--code-number:#8A6100;
  --code-keyword:#B51F2C;--code-function:#1D3557;--code-type:#44597A;

  /* Terminal: a dark screen in both themes */
  --term-bg:#1D3557;--term-bar:#16294A;--term-ink:#F1FAEE;--term-out:#C9D6E6;
  --term-prompt:#A8DADC;--term-ok:#A6E3C4;--term-err:#FFB3B9;--term-dim:#93A7C4;

  /* Attribution colour for AI-assisted notes */
  --claude:#D97757;--claude-soft:rgba(217,119,87,0.14);

  /* Spacing */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-8:32px;
  --space-pad:28px;--space-gap:40px;

  /* Radii, with the short aliases the component styles use */
  --radius-tag:6px;--radius-control:9px;--radius-button:10px;--radius-chip:12px;
  --radius-code:14px;--radius-card:16px;--radius-panel:20px;--radius-pill:999px;
  --r-tag:var(--radius-tag);--r-control:var(--radius-control);--r-btn:var(--radius-button);--r-chip:var(--radius-chip);
  --r-code:var(--radius-code);--r-card:var(--radius-card);--r-panel:var(--radius-panel);--r-pill:var(--radius-pill);

  /* Elevation */
  --shadow-panel:0 1px 2px rgba(29,53,87,.06), 0 22px 44px -30px rgba(29,53,87,.5);
  --shadow-lift:0 18px 36px -22px rgba(29,53,87,.55);

  /* Type: Archivo (variable width and weight) and JetBrains Mono, from Google Fonts */
  --font-display:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --header-h:64px;
  color-scheme:light;
}
@media (max-width:720px){ :root{ --space-pad:14px; --space-gap:24px; } }

/* ── Dark ──────────────────────────────────────────────────────────────── */
/* The same values twice: once for a saved choice, once for the system setting. */
:root[data-theme="dark"]{
  --bg:#0E1D33;--surface:#16294A;--surface-2:#1D3557;--surface-3:#2A4A74;
  --ink:#F1FAEE;--ink-2:#C9D6E6;--ink-3:#9FB2CB;
  --line:rgba(241,250,238,0.16);--line-2:rgba(241,250,238,0.08);
  --accent:#E63946;--accent-strong:#FF8F98;--accent-deep:#D62F3C;--accent-soft:rgba(230,57,70,0.16);--accent-line:rgba(230,57,70,0.45);
  --on-accent:#FFFFFF;--accent-2:#A8DADC;--accent-2-soft:rgba(168,218,220,0.12);--navy:#1D3557;--art-a:#C9D6E6;
  --ok:#A6E3C4;--ok-soft:rgba(166,227,196,0.14);--warn:#FFD89E;--warn-soft:rgba(255,216,158,0.12);--danger:#FFB3B9;--danger-soft:rgba(230,57,70,0.18);
  --code-bg:#1D3557;--code-bar:#16294A;--code-ink:#F1FAEE;--code-comment:#93A7C4;--code-string:#A8DADC;
  --code-number:#FFC4C8;--code-keyword:#FF8F98;--code-function:#A6E3C4;--code-type:#FFD89E;
  --term-bg:#0A1628;--term-bar:#16294A;
  --shadow-panel:0 1px 2px rgba(0,0,0,.3), 0 22px 44px -30px rgba(0,0,0,.8);
  --shadow-lift:0 18px 36px -22px rgba(0,0,0,.7);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0E1D33;--surface:#16294A;--surface-2:#1D3557;--surface-3:#2A4A74;
    --ink:#F1FAEE;--ink-2:#C9D6E6;--ink-3:#9FB2CB;
    --line:rgba(241,250,238,0.16);--line-2:rgba(241,250,238,0.08);
    --accent:#E63946;--accent-strong:#FF8F98;--accent-deep:#D62F3C;--accent-soft:rgba(230,57,70,0.16);--accent-line:rgba(230,57,70,0.45);
    --on-accent:#FFFFFF;--accent-2:#A8DADC;--accent-2-soft:rgba(168,218,220,0.12);--navy:#1D3557;--art-a:#C9D6E6;
    --ok:#A6E3C4;--ok-soft:rgba(166,227,196,0.14);--warn:#FFD89E;--warn-soft:rgba(255,216,158,0.12);--danger:#FFB3B9;--danger-soft:rgba(230,57,70,0.18);
    --code-bg:#1D3557;--code-bar:#16294A;--code-ink:#F1FAEE;--code-comment:#93A7C4;--code-string:#A8DADC;
    --code-number:#FFC4C8;--code-keyword:#FF8F98;--code-function:#A6E3C4;--code-type:#FFD89E;
    --term-bg:#0A1628;--term-bar:#16294A;
    --shadow-panel:0 1px 2px rgba(0,0,0,.3), 0 22px 44px -30px rgba(0,0,0,.8);
    --shadow-lift:0 18px 36px -22px rgba(0,0,0,.7);
    color-scheme:dark;
  }
}

/* ── Tones: put one on any element, then use var(--tone) and friends ───── */
/* Each role has a fill, a tint, an ink and a colour for text sitting on the fill. */
.tn-red { --tone:var(--accent-deep); --tone-soft:var(--accent-soft);   --tone-ink:var(--accent-strong); --tone-on:#FFFFFF; }
.tn-navy{ --tone:var(--art-a);       --tone-soft:var(--surface-2);     --tone-ink:var(--ink);           --tone-on:var(--bg); }
.tn-sky { --tone:var(--accent-2);    --tone-soft:var(--accent-2-soft); --tone-ink:var(--ink);           --tone-on:#1D3557; }
.tn-ok  { --tone:var(--ok);          --tone-soft:var(--ok-soft);       --tone-ink:var(--ok);            --tone-on:var(--bg); }
.tn-rose{ --tone:var(--accent-line); --tone-soft:var(--accent-soft);   --tone-ink:var(--accent-strong); --tone-on:var(--ink); }
.tn-warn{ --tone:var(--warn);        --tone-soft:var(--warn-soft);     --tone-ink:var(--warn);          --tone-on:var(--bg); }