/* FML Playground, on its own: the fpa-practice.com tokens (paper and ledger blue). Embedded in the site, the site's
   own tokens apply and this file is not loaded. */
:root {
  --paper: #f6f6f2; --ink: #1d2433; --soft: #4c5566; --faint: #8b91a0;
  --accent: #28457f; --accent-dim: rgba(40, 69, 127, 0.35); --accent-soft: #e7ebf4;
  --rule: #d8dad2; --code-bg: #eceee8; --card: #fdfdfb;
  --diff-add-bg: #e2efe2; --diff-add-ink: #1e6b34; --diff-del-bg: #f5e3e1; --diff-del-ink: #a03c30;
  --f-display: 'Hanken Grotesk', system-ui, sans-serif;
  --f-body: 'Source Serif 4', Georgia, serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #171b23; --ink: #e6e4dc; --soft: #a2a8b4; --faint: #6d7482;
    --accent: #8fb0e8; --accent-dim: rgba(143, 176, 232, 0.35); --accent-soft: #232c3e;
    --rule: #333a47; --code-bg: #1f2530; --card: #1d222d;
    --diff-add-bg: #1c2f22; --diff-add-ink: #7fce97; --diff-del-bg: #3a2320; --diff-del-ink: #e59a8e;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #171b23; --ink: #e6e4dc; --soft: #a2a8b4; --faint: #6d7482;
  --accent: #8fb0e8; --accent-dim: rgba(143, 176, 232, 0.35); --accent-soft: #232c3e;
  --rule: #333a47; --code-bg: #1f2530; --card: #1d222d;
  --diff-add-bg: #1c2f22; --diff-add-ink: #7fce97; --diff-del-bg: #3a2320; --diff-del-ink: #e59a8e;
  color-scheme: dark;
}
html, body { margin: 0; height: 100%; }
body { background: var(--paper); color: var(--ink); font: 15px/1.5 var(--f-body); }

/* ------------------------------------------------------------------ Graphite: the playground's own look (DESIGN.md)
   Neutral greys with a cool bias, one restrained petrol accent, Inter for the interface, the prose and the numbers (tabular),
   JetBrains Mono for code. Chosen with data-look="graphite" on the root; Classic (above) is the site's look. */
:root[data-look="graphite"] {
  --paper: #f6f7f9; --card: #ffffff; --code-bg: #eef0f3; --rule: #e1e4e9;
  --ink: #1b1e24; --soft: #5a6170; --faint: #8c93a1;
  --accent: #0f6e78; --accent-dim: rgba(15, 110, 120, 0.3); --accent-soft: #e2f0f1;
  --diff-add-bg: #e3f3e8; --diff-add-ink: #1f7a3d; --diff-del-bg: #fbe7e7; --diff-del-ink: #c0352f;
  --f-display: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root[data-look="graphite"]:not([data-theme="light"]) {
    --paper: #0f1115; --card: #171a20; --code-bg: #1b1f26; --rule: #2a2f38;
    --ink: #e7e9ee; --soft: #a3aab6; --faint: #6f7683;
    --accent: #4fb8c3; --accent-dim: rgba(79, 184, 195, 0.32); --accent-soft: #132f33;
    --diff-add-bg: #16271d; --diff-add-ink: #5cc98a; --diff-del-bg: #351c1c; --diff-del-ink: #f07a7a;
    color-scheme: dark;
  }
}
:root[data-look="graphite"][data-theme="dark"] {
  --paper: #0f1115; --card: #171a20; --code-bg: #1b1f26; --rule: #2a2f38;
  --ink: #e7e9ee; --soft: #a3aab6; --faint: #6f7683;
  --accent: #4fb8c3; --accent-dim: rgba(79, 184, 195, 0.32); --accent-soft: #132f33;
  --diff-add-bg: #16271d; --diff-add-ink: #5cc98a; --diff-del-bg: #351c1c; --diff-del-ink: #f07a7a;
  color-scheme: dark;
}