/* nonened.io — shared design system (landing + /ai-roadmap/ course).
   Served at /assets/tokens.css by the same nginx for both pages.
   Light is the default. The course sets html[data-theme="dark"] from JS
   (stored choice, else prefers-color-scheme); the landing never sets it.
   Changing anything in this file or in ./fonts/ requires bumping VERSION in
   ai-roadmap-astro/public/sw.js, otherwise returning course visitors keep
   the old copy from the service-worker cache. */

@font-face { font-family: 'Piazzolla'; font-weight: 400; font-style: normal; font-display: swap; src: url('./fonts/piazzolla-v42-cyrillic_latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'Piazzolla'; font-weight: 600; font-style: normal; font-display: swap; src: url('./fonts/piazzolla-v42-cyrillic_latin-600.woff2') format('woff2'); }
@font-face { font-family: 'Piazzolla'; font-weight: 600; font-style: italic; font-display: swap; src: url('./fonts/piazzolla-v42-cyrillic_latin-600italic.woff2') format('woff2'); }

:root {
  color-scheme: light;

  /* surfaces: warm paper family, derived from the night palette below */
  --paper: #f1eadc;
  --paper-2: #e8dfcd;
  --surface: #f8f3ea;
  --surface-2: #e2d8c3;

  /* ink */
  --ink: #171310;
  --ink-2: #5a5044;
  --ink-3: #6f6557;

  /* edges: self-coloured, felt more than seen */
  --line: rgba(23, 19, 16, 0.10);
  --line-strong: rgba(23, 19, 16, 0.22);

  /* brass accent: tonal, never a poster fill */
  --accent: #8a744f;
  --accent-strong: #6e5a3a;
  --accent-soft: rgba(138, 116, 79, 0.12);
  --accent-ink: #f1eadc;

  /* data states (quiz, progress) */
  --ok: #3f6b4a;
  --ok-soft: rgba(63, 107, 74, 0.12);
  --danger: #9a3f35;
  --danger-soft: rgba(154, 63, 53, 0.12);

  /* fine grain for large surfaces; behind content, never over it */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.09 0 0 0 0 0.075 0 0 0 0 0.06 0 0 0 0.045 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");

  --font-display: 'Piazzolla', Georgia, 'Times New Roman', serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, Menlo, Consolas, monospace;

  --wrap-w: 1120px;
  --content-w: 1040px;
  --max-w: 1200px;

  --r-s: 6px;
  --r: 10px;
  --r-l: 14px;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --paper: #171310;
  --paper-2: #1d1813;
  --surface: #211b14;
  --surface-2: #2a2218;

  --ink: #ece5d8;
  --ink-2: #a89d8c;
  --ink-3: #8f8474;

  --line: rgba(236, 229, 216, 0.09);
  --line-strong: rgba(236, 229, 216, 0.20);

  --accent: #c9a86b;
  --accent-strong: #dcbf84;
  --accent-soft: rgba(201, 168, 107, 0.14);
  --accent-ink: #171310;

  --ok: #7fae8b;
  --ok-soft: rgba(127, 174, 139, 0.14);
  --danger: #d0786c;
  --danger-soft: rgba(208, 120, 108, 0.14);

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}