/*
  theme.css — слой темы для grandeetoile.pro
  ---------------------------------------------------------
  Для чего:
    — Вынести палитру и шрифты в одно место (переменные),
      чтобы правки дизайна были безопасны для разметки.

  Как устроен:
    # 1. Переменные :root (цвета/радиусы/тени/шрифты)
    # 2. База: фон страницы, основной текст, сглаживание
    # 3. Ссылки (обычные и при наведении)
    # 4. Заголовки (минимально, без ломки сетки)
*/

/* # 1. Переменные :root (настройки темы) */
:root{
  /* 1.1 Цвета (из ваших образцов, с поправкой на контраст) */
  --bg:           #eeebe6;   /* тёплый светлый фон */
  --surface:      #ffffff;   /* поверхность карточек/панелей */
  --text:         #2a2a2a;   /* основной текст (тёмный для контраста) */
  --text-muted:   #6b6b6b;   /* вторичный текст */
  --accent:       #ddbcad;   /* акцент («розовое золото», светлый бежево-розовый) */
  --accent-ink:   #2a2a2a;   /* текст на акценте (тёмный, т.к. сам акцент светлый) */
  --border:       #e6e0d9;   /* делители/границы (слегка темнее фона) */
  --link:         #c2a598;   /* ссылки — тёмнее акцента */
  --link-hover:   #a58d81;   /* hover — ещё на шаг темнее */

  /* 1.2 Геометрия/тени */
  --radius-sm:    8px;
  --radius-md:    12px;
  --shadow-sm:    0 1px 2px rgba(0,0,0,.04), 0 1px 1px rgba(0,0,0,.02);
  --shadow-md:    0 6px 18px rgba(0,0,0,.06);

  /* 1.3 Шрифты (системные — без внешних загрузок) */
  --font-ui:      system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", "Liberation Sans", sans-serif;
  --font-serif:   Georgia, "Times New Roman", Times, serif;
}

/* # 2. База: фон/текст/сглаживание */
html, body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color-scheme: light;
}

/* # 3. Ссылки */
a{
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--link) 35%, transparent);
  text-underline-offset: 2px;
}
a:hover{ color: var(--link-hover); }

/* # 4. Заголовки (минимально) */
h1,h2,h3{
  color: var(--text);
  line-height: 1.25;
  margin-top: 1.2em;
}