/* ==========================================================================
   Токены. Имена совпадают с переменными Figma один в один — те же строки
   отдаёт Dev Mode, потому что у каждой переменной задан code syntax.
   ========================================================================== */

:root {
  /* ---- Цвет: тема «Флаг Греции» (основная) ---------------------------- */
  --color-blue-900: #2e4967;
  --color-blue-800: #315c89;
  --color-blue-700: #3478bc;
  --color-blue-600: #4d8fd2;
  --color-blue-500: #76aedf;
  --color-blue-300: #accdec;
  --color-blue-200: #d7e7f7;
  --color-blue-100: #e9f2fa;
  --color-blue-50:  #f5f8fd;

  --color-white:      #ffffff;
  --color-ink:        #14202e;
  --color-ink-muted:  #5a6b7d;
  --color-border:     #dce5ee;

  --color-accent-gold:    #c9a63b;
  /* Осветлённое золото для текста на синем фоне: обычное даёт там 3.97:1 при
     норме 4.5. Тон и насыщенность те же, поднята только светлота. */
  --color-accent-gold-on-dark: #d2b55b;
  --color-accent-crimson: #8c1c1c;

  --color-success: #1e7a4b;
  --color-warning: #8a6212;
  --color-danger:  #a32a21;

  /* ---- Отступы, радиусы, обводки -------------------------------------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --space-128: 128px;

  --radius-none: 0;
  --radius-field: 4px;
  --radius-card: 8px;
  --radius-pill: 999px;

  --stroke-hairline: 1px;
  --stroke-focus: 2px;

  /* ---- Размеры шрифта: режим Desktop ---------------------------------- */
  --font-display-xl: 72px;
  --font-display-l: 56px;
  --font-heading-h2: 40px;
  --font-heading-h2-small: 34px;
  --font-heading-h3: 28px;
  --font-heading-h4: 22px;
  --font-body-lead: 22px;
  --font-body-base: 18px;
  --font-body-small: 16px;
  --font-caption: 14px;
  --font-ui-label: 16px;
  --font-ui-value: 16px;
  --font-overline: 13px;

  /* ---- Метрика раскладки --------------------------------------------- */
  --content-max: 1280px;
  --reading-max: 680px;
  --page-gutter: var(--space-64);
  --section-rhythm: var(--space-96);
}

/* ---- Размеры шрифта: режим Mobile.
   Полный аналог режима Mobile коллекции Breakpoint в Figma: меняются только
   размеры, стили и разметка те же. ------------------------------------- */
@media (max-width: 767px) {
  :root {
    --font-display-xl: 40px;
    --font-display-l: 32px;
    --font-heading-h2: 28px;
    --font-heading-h2-small: 26px;
    --font-heading-h3: 22px;
    --font-heading-h4: 20px;
    --font-body-lead: 19px;
    --font-body-base: 17px;
    --font-body-small: 15px;
    --font-caption: 14px;
    --font-overline: 12px;

    --page-gutter: var(--space-16);
    --section-rhythm: 56px;
  }
}

/* ==========================================================================
   Тема «Корфу». Второй режим коллекции Foundations: те же токены, другие
   значения. Разметка и стили не дублируются.
   ========================================================================== */

[data-theme="corfu"] {
  --color-blue-900: #5e241c; /* терракота глубокая — футер     */
  --color-blue-800: #83352a; /* терракота тёмная — hover        */
  --color-blue-700: #a34234; /* терракота колокольни — акцент   */
  --color-blue-600: #26708c; /* синь Ионического моря — фокус   */
  --color-blue-500: #5e9ab0;
  --color-blue-300: #d9c9ae;
  --color-blue-200: #eadfc9;
  --color-blue-100: #f0e7d8;
  --color-blue-50:  #faf5ec;

  /* Долг именования: в тёплой теме это кремовая поверхность, а не белый.
     К релизу переименовать в --color-surface (см. design.md §18.5). */
  --color-white:     #fdfaf4;
  --color-ink:       #2a2118;
  --color-ink-muted: #6b5e4f;
  --color-border:    #ded2be;

  --color-accent-gold:    #c08a2e; /* венецианская охра */
  --color-accent-gold-on-dark: #cf9738;
  --color-accent-crimson: #8c2f22;

  --color-success: #2e6b45;
  --color-warning: #8a6212;
  --color-danger:  #a3352b;
}

/* ==========================================================================
   Тема «Строгая синяя». Третий режим коллекции Foundations.

   Вся шкала построена от синего флага Греции: Pantone 285 C = #0d5eaf =
   HSL(210, 86%, 37%). Тон и насыщенность у всех девяти токенов те же, меняется
   только светлота — поэтому цвета читаются как один флажный синий, а не как
   приглушённая гамма основной темы (там насыщенность ниже, 39–55%).

   Тёмный конец шкалы сжат намеренно: синий флага светлее, чем blue-900 в
   основной теме, и всё, что должно быть контрастнее его (hover ссылок),
   помещается между 37% и 45% светлоты. Светлый конец наоборот отодвинут
   вверх: на более светлом футере тексту нужны более бледные тона, иначе
   контраст падает ниже нормы.
   ========================================================================== */

[data-theme="strict"] {
  --color-blue-900: #0d5eaf; /* синий флага Греции — футер, шапка, герой */
  --color-blue-800: #0e64ba; /* hover ссылок                            */
  --color-blue-700: #1070c9; /* ссылки и акценты                        */
  --color-blue-600: #2e8fef; /* обводка фокуса                          */
  --color-blue-500: #5ea8f3;
  --color-blue-300: #c6e0fb; /* текст на синем фоне                     */
  --color-blue-200: #deedfd; /* ссылки и лид на синем фоне              */
  --color-blue-100: #ebf3fe;
  --color-blue-50:  #f4f9fe;

  /* На флажном синем — самом светлом из трёх футеров — золоту нужно быть
     заметно бледнее, чтобы удержать 4.5:1. */
  --color-accent-gold-on-dark: #e8d9ab;

  --color-ink:        #10233b; /* холодная тушь с синим подтоном */
  --color-ink-muted:  #4a5f7a;
  --color-border:     #cfdeef;
}