/*
  Design tokens. The only file to touch when the visual style changes.
  Layer 1 — palette: raw colours from the reference (05 · По мотивам вашего референса).
  Layer 2 — semantic tokens: what components use. Components never reference the palette directly.
*/
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-cyrillic-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* ---- palette ---- */
  --p-white: #FFFFFF;
  --p-ink: #111111;
  --p-ink-2: #555555;
  --p-ink-3: #777777;
  --p-sand-1: #F2F0EC;
  --p-sand-2: #E3DFD8;
  --p-sand-3: #D9D5CF;
  --p-sand-4: #C8C3BB;
  --p-terracotta: #B23A2B;
  --p-terracotta-soft: #F4E3DF;
  --p-ochre-soft: #F3EBDD;
  --p-ochre-ink: #5C4520;

  /* ---- semantic: colour ---- */
  --bg: var(--p-white);
  --surface: var(--p-sand-1);       /* quiet blocks, inputs */
  --surface-strong: var(--p-ink);   /* dark blocks */
  --on-strong: var(--p-white);
  --ink: var(--p-ink);
  --muted: var(--p-ink-2);
  --subtle: var(--p-ink-3);
  --line: var(--p-sand-4);
  --placeholder: var(--p-sand-3);
  --art-1: var(--p-sand-3);         /* photo placeholders, decorative blocks */
  --art-2: var(--p-sand-4);
  --accent: var(--p-terracotta);    /* highlights, numbers, progress */
  --accent-soft: var(--p-terracotta-soft);
  --btn-bg: var(--p-ink);           /* primary button */
  --btn-ink: var(--p-white);
  --choice-on-bg: var(--p-ink);     /* selected chip */
  --choice-on-ink: var(--p-white);
  --note-bg: var(--p-ochre-soft);
  --note-ink: var(--p-ochre-ink);
  --ok: #2F6B4F;
  --err: var(--p-terracotta);
  --focus: var(--p-terracotta);

  /* ---- semantic: type ---- */
  --font-body: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --font-display: 'Manrope', 'Segoe UI', system-ui, sans-serif;
  --display-weight: 300;
  --display-tracking: -0.03em;
  --heading-tracking: -0.02em;
  --label-tracking: 0.12em;         /* small uppercase labels */
  --text-size: 15px;
  --text-lh: 1.6;

  /* ---- semantic: shape and rhythm ---- */
  --radius: 0;                      /* the reference uses square corners everywhere */
  --radius-chip: 0;
  --page-max: 1280px;
  --gutter: 40px;
  --section-gap: 72px;
  color-scheme: light;
}

@media (max-width: 720px) {
  :root { --gutter: 16px; --section-gap: 48px; }
}

/* Dark theme: same structure, inverted values. Follows the system setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121110;
    --surface: #1D1B19;
    --surface-strong: #F2F0EC;
    --on-strong: #121110;
    --ink: #F2F0EC;
    --muted: #B3ADA5;
    --subtle: #8E8880;
    --line: #3A3632;
    --placeholder: #2A2724;
    --art-1: #2A2724;
    --art-2: #35312D;
    --accent: #E06A58;
    --accent-soft: #3A221E;
    --btn-bg: #F2F0EC;
    --btn-ink: #121110;
    --choice-on-bg: #F2F0EC;
    --choice-on-ink: #121110;
    --note-bg: #2B261D;
    --note-ink: #E3D3B0;
    --ok: #7FC4A1;
    --err: #F08877;
    --focus: #E06A58;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121110;
  --surface: #1D1B19;
  --surface-strong: #F2F0EC;
  --on-strong: #121110;
  --ink: #F2F0EC;
  --muted: #B3ADA5;
  --subtle: #8E8880;
  --line: #3A3632;
  --placeholder: #2A2724;
  --art-1: #2A2724;
  --art-2: #35312D;
  --accent: #E06A58;
  --accent-soft: #3A221E;
  --btn-bg: #F2F0EC;
  --btn-ink: #121110;
  --choice-on-bg: #F2F0EC;
  --choice-on-ink: #121110;
  --note-bg: #2B261D;
  --note-ink: #E3D3B0;
  --ok: #7FC4A1;
  --err: #F08877;
  --focus: #E06A58;
  color-scheme: dark;
}