/* Design tokens: colours, radii, spacing, font stacks. Single source of values for all other CSS files.
   Light values live in :root (default theme, R27); dark values in :root[data-theme="dark"].
   Dark mode is switched only by the toggle (data-theme attribute), never by the operating-system setting.
   Every colour token must have a value in both blocks. */

:root {
  color-scheme: light; /* native controls and scrollbars follow the theme */
  --bg: #fafaf7;
  --surface: #ffffff;
  --surface-2: #f3f3ef;
  --text: #16161a;
  --muted: #6b6b73;
  --border: #e3e3de;
  --accent: #4f46e5;
  --accent-ink: #ffffff;
  --accent-soft: #ecebfc;
  --def-bg: #eef0fb;
  --def-line: #4f46e5;
  --err-bg: #fbefee;
  --err-line: #b5493a;
  --use-bg: #eef6ec;
  --use-line: #3f7a35;
  --du-bg: #fff7dc;
  --du-line: #d9a400;
  --du-ink: #7a5d00;
  --ok: #357a31;
  --hl: #fde9a8;
  --hl2: #cfe4f7;
  --knob: #ffffff;
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, .2);
  --backdrop: rgba(0, 0, 0, .35);

  /* colours of SVG figures inside lessons (classes .svg-* in komponenty/obsah.css) */
  --svg-ciara: var(--text);
  --svg-akcent: var(--accent);
  --svg-chyba: var(--err-line);
  --svg-tlmene: var(--muted);
  --svg-ok: var(--ok);
  --svg-vyplna-1: var(--hl2);
  --svg-vyplna-2: var(--hl);

  /* colours of the dashboard charts (komponenty/grafy.css); like --svg-* they only reference
     colour tokens, so the dark theme needs no extra values */
  --graf-1: var(--accent);
  --graf-2: var(--muted);
  --graf-chyba: var(--err-line);
  --graf-mriezka: var(--border);
  --graf-text: var(--muted);

  /* colours of the networking course diagrams (classes .svg-v-* fill and .svg-o-* stroke in
     komponenty/obsah.css): seven hues and their light fills, so a diagram can tell apart layers,
     devices or signals. Text uses --svg-ciara / --svg-tlmene, surfaces --surface / --surface-2;
     only the grid line colour is new. Hues are dark enough for text in the light theme (≥ 3:1). */
  --svg-linka: #b4bac6;
  --svg-modra: #2f6fd6;       --svg-modra-svetla: #dce8fb;
  --svg-zelena: #23804a;      --svg-zelena-svetla: #dcf2e4;
  --svg-oranzova: #b85f0f;    --svg-oranzova-svetla: #fde8d4;
  --svg-fialova: #8452c9;     --svg-fialova-svetla: #ece2f8;
  --svg-cervena: #d64545;     --svg-cervena-svetla: #f9dddd;
  --svg-tyrkysova: #167d87;   --svg-tyrkysova-svetla: #d6f0f2;
  --svg-zlta: #c9a10a;        --svg-zlta-svetla: #f8efc8;

  /* border radii */
  --r-xs: 2px;
  --r-3: 3px;
  --r-s: 4px;
  --r-m: 6px;
  --r: 8px;
  --r-9: 9px;
  --r-l: 10px;
  --r-xl: 12px;
  --r-pill: 999px;

  /* spacing scale (only values that repeat at least 3 times in the CSS; 32px is not used, so --s-7 does not exist) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 40px;

  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Source Serif 4", Georgia, "DejaVu Serif", serif;
  --mono: "JetBrains Mono", "DejaVu Sans Mono", ui-monospace, Menlo, monospace;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121214; --surface: #1b1b1f; --surface-2: #222227;
  --text: #ecebe6; --muted: #9a9aa3; --border: #2c2c33;
  --accent: #8580f2; --accent-ink: #0f0e2a; --accent-soft: #222044;
  --def-bg: #1e2040; --def-line: #8580f2;
  --err-bg: #3a1f1d; --err-line: #e07a6a;
  --use-bg: #1c2e1a; --use-line: #7ec371;
  --du-bg: #3a3010; --du-line: #e6c14a; --du-ink: #e6c14a;
  --ok: #7ec371; --hl: #5a4a12; --hl2: #24466b;
  --knob: #ffffff; --shadow-lg: 0 10px 30px rgba(0, 0, 0, .6); --backdrop: rgba(0, 0, 0, .6);

  /* networking diagram hues (see the light block) */
  --svg-linka: #4a5263;
  --svg-modra: #6f9df0;       --svg-modra-svetla: #22324f;
  --svg-zelena: #5cc98a;      --svg-zelena-svetla: #1f3a2b;
  --svg-oranzova: #f0a35e;    --svg-oranzova-svetla: #45311d;
  --svg-fialova: #b18cf0;     --svg-fialova-svetla: #33284a;
  --svg-cervena: #f07a7a;     --svg-cervena-svetla: #4a2424;
  --svg-tyrkysova: #5cc8d2;   --svg-tyrkysova-svetla: #1c3c40;
  --svg-zlta: #e6c84f;        --svg-zlta-svetla: #423a17;

  /* --svg-* aliases (svg-ciara … svg-vyplna-2) and --graf-* tokens are not repeated here: they only reference the colour tokens above via var(),
     so they follow the dark values automatically. */
}