:root {
  /* Colors — see DESIGN.md §1 */
  --color-primary: #12234A;
  --color-primary-hover: #1B3568;
  --color-secondary: #B36644; /* brand color 2026-08-14 (was #9C5230). Below AA 4.5:1 in every
     role this token plays — 3.81:1 as button/badge bg w/ cream text, 4.01–4.29:1 as link/icon
     text on light surfaces, 4.16:1 as footer link-hover text on --color-dark. Kept anyway per
     explicit brand-color decision (see also --color-secondary-hover, which meets AA at 5.49:1). */
  --color-secondary-hover: #8F5136; /* was #8A4626 */
  --color-surface: #FAF7F3;
  --color-surface-alt: #F1ECE5;
  --color-card-bg: #FFFFFF;
  --color-text: #1A1A1A;
  --color-text-muted: #6B6660;
  --color-border: #E4DED5;
  --color-dark: #0B1730;
  --color-on-dark: #F5F1EA;

  /* Semantic aliases used by components.css */
  --color-danger: #B5453A;
  --color-danger-bg: #F7E9E7;
  --color-success: #3F7856;
  --color-success-bg: #E9F1EC;

  /* Typography — see DESIGN.md §2. Two families, both free / Google Fonts / full Cyrillic:
     Lora (serif) for headings, Onest (sans) for everything else. No Gilroy, no Circe, no
     Manrope, no Inter, no Golos Text anywhere in this project. Hierarchy still comes from
     --text-* size and --weight-* weight only — exactly 4 sizes and 3 weight VALUES (reused
     across both families) — do not add a 5th size or 4th weight anywhere in
     components.css/pages.css, reuse these. */
  --font-heading: 'Lora', Georgia, 'Times New Roman', serif;
  --font-body: 'Onest', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-sans: var(--font-body); /* alias kept for existing component rules that read --font-sans */
  --font-mono: 'JetBrains Mono', monospace;

  --text-1: clamp(2rem, 3.5vw, 2.75rem);   /* h1 */
  --text-2: clamp(1.375rem, 2vw, 1.75rem); /* h2, tariff price, stat number */
  --text-3: 1.125rem;                      /* h3, lead paragraph, card/tariff title */
  --text-4: 1.0625rem;                     /* body, nav, buttons, footer, faq, badges, breadcrumb, small, table cells — bumped from 0.9375rem 2026-08-02, readability pass */

  --weight-regular: 400;  /* Onest body */
  --weight-medium: 600;   /* Onest emphasis: buttons, nav, labels; Lora h3 */
  --weight-bold: 700;     /* Lora h1/h2 (Lora's heaviest static weight is 700, not 800) */

  /* Line-height — tightened 2026-08-02 (was 1.6/1.7, read as over-spaced) */
  --line-height-base: 1.45;
  --line-height-heading: 1.2;

  /* Prose measure — one column width for all body copy: 65-75 characters */
  --prose-width: 68ch;

  /* Spacing — see DESIGN.md §3 */
  --spacing-unit: 1.5rem;
  --spacing-section: 5rem;
  --spacing-section-mobile: 3rem;
  --info-list-gap: 20px;
  --max-width: 1200px;
  --container-padding: 2.5rem;
  --container-padding-mobile: 1.25rem;
  --header-height: 76px;
  /* Compact vertical rhythm inside blocks (steps, cards, limit-pairs, FAQ) — 2026-08-02 pass */
  --gap-tight: 0.75rem;

  /* Radii & shadows — see DESIGN.md §4 */
  --radius-card: 16px;
  --radius-pill: 1000px;
  --shadow-card: 0 4px 20px rgba(18, 35, 74, 0.08);
  --shadow-hover: 0 8px 30px rgba(18, 35, 74, 0.14);
}

/* Mobile density pass 2026-08-14: headings and block spacing read as oversized
   on ~375-390px screens compared to competitors (moedelo.org, lad-salon.ru).
   Same 4 named sizes, same --spacing-unit/--spacing-section-mobile tokens —
   only the values differ below 768px, so every consumer (h1-h3, card titles,
   tariff prices, grid gaps) gets denser automatically without a 5th size or
   a second spacing scale. --text-4 (body/nav/faq/table copy) is deliberately
   untouched — it's already near the 16px readability floor.
   --text-3 lands at -25% instead of the requested ~20-25% for h1/h2: h3 is
   only 1px above --text-4 to start with (18px vs 17px), so a full 20-25% cut
   would put h3 (e.g. card/tariff titles) visually smaller than the body text
   sitting right under it in the same card. 16px keeps h3 >= body while still
   shrinking noticeably from 18px. */
@media (max-width: 768px) {
  :root {
    --text-1: 1.5rem;      /* was clamp() min 2rem on mobile, -25% */
    --text-2: 1.0625rem;   /* was clamp() min 1.375rem on mobile, -22.7% */
    --text-3: 1rem;        /* was 1.125rem, -11.1% (see note above) */
    --spacing-unit: 1.125rem;       /* was 1.5rem, -25% */
    --spacing-section-mobile: 2rem; /* was 3rem, -33% further than the existing mobile value */
  }
}
