/* ===========================================
   ТОКЕНЫ ДИЗАЙНА — Atmospheric Riverside
   Источник: stitch_svoya_naberezhnaya_website_design/DESIGN.md (frontmatter)

   ЕДИНСТВЕННОЕ место с цветами и типографикой.
   Ни один цвет не пишется хардкодом в компонентах — только через var().
   Ребренд сайта = правка этого файла + config.py.
   =========================================== */

:root {
    /* ─── Поверхности ─────────────────────────────────────────── */
    --color-surface: #fcf9ef;              /* тёплый кремовый — фон вместо белого */
    --color-surface-dim: #dddad0;
    --color-surface-bright: #fcf9ef;
    --color-surface-lowest: #ffffff;
    --color-surface-low: #f7f4e9;
    --color-surface-container: #f1eee4;
    --color-surface-high: #ebe8de;
    --color-surface-highest: #e5e2d9;
    --color-surface-variant: #e5e2d9;
    --color-background: #fcf9ef;

    /* ─── Текст ───────────────────────────────────────────────── */
    --color-on-surface: #1c1c16;
    --color-on-surface-variant: #544341;   /* основной текст абзацев */
    --color-on-background: #1c1c16;
    --color-inverse-surface: #31312a;
    --color-inverse-on-surface: #f4f1e7;

    /* ─── Бордовый (главный) ──────────────────────────────────── */
    --color-primary: #2a0002;              /* почти чёрно-красный, тёмные плашки */
    --color-primary-container: #4a0e0e;    /* бордо — ВСЕ заголовки */
    --color-on-primary: #ffffff;
    --color-on-primary-container: #cc726d;
    --color-inverse-primary: #ffb3ad;
    --color-surface-tint: #954742;
    --color-primary-fixed: #ffdad7;
    --color-primary-fixed-dim: #ffb3ad;
    --color-on-primary-fixed: #3d0506;
    --color-on-primary-fixed-variant: #77302d;

    /* ─── Закатный акцент ─────────────────────────────────────── */
    --color-secondary: #944a00;            /* оранжево-коричневый — метки, ссылки */
    --color-secondary-container: #fc8f34;
    --color-on-secondary: #ffffff;
    --color-on-secondary-container: #663100;
    --color-secondary-fixed: #ffdcc5;
    --color-secondary-fixed-dim: #ffb783;
    --color-on-secondary-fixed: #301400;
    --color-on-secondary-fixed-variant: #713700;

    /* ─── Янтарный ────────────────────────────────────────────── */
    --color-tertiary: #1a0c00;
    --color-tertiary-container: #371f00;
    --color-on-tertiary: #ffffff;
    --color-on-tertiary-container: #c47b00;
    --color-tertiary-fixed: #ffddb9;       /* заголовки на тёмном фоне */
    --color-tertiary-fixed-dim: #ffb961;
    --color-on-tertiary-fixed: #2b1700;
    --color-on-tertiary-fixed-variant: #663e00;

    /* ─── Служебные ───────────────────────────────────────────── */
    --color-error: #ba1a1a;
    --color-on-error: #ffffff;
    --color-error-container: #ffdad6;
    --color-on-error-container: #93000a;
    --color-outline: #877270;
    --color-outline-variant: #dac1bf;

    /* Тонкая рамка «inner frame» — бордо 20%. Основной инструмент разделения
       по DESIGN.md: «Elegant, thin (1px) lines are the primary tool». */
    --frame-border: rgba(74, 14, 14, 0.2);
    --frame-border-soft: rgba(74, 14, 14, 0.1);

    /* ─── Шрифты ──────────────────────────────────────────────── */
    /* Заголовки. В макете значился Bebas Neue, но у него НЕТ кириллицы
       (Google отдаёт только latin/latin-ext) — весь русский текст падал бы
       в засечный фолбэк. Заменён на Oswald: тот же узкий плакатный характер,
       кириллица есть. Смена шрифта = правка этих двух строк. */
    --font-display: 'Oswald', 'Helvetica Neue', Arial, sans-serif;
    /* Текст. Work Sans из макета — тоже без кириллицы. Заменён на Manrope. */
    --font-body: 'Manrope', -apple-system, 'Segoe UI', Roboto, sans-serif;

    /* ─── Типографическая шкала ───────────────────────────────── */
    --text-display-xl: 80px;
    --text-display-xl-lh: 80px;
    --text-display-xl-ls: 0.02em;

    --text-headline-lg: 48px;
    --text-headline-lg-lh: 52px;
    --text-headline-lg-ls: 0.05em;

    --text-headline-lg-mobile: 36px;
    --text-headline-lg-mobile-lh: 40px;

    --text-headline-md: 32px;
    --text-headline-md-lh: 36px;

    --text-body-lg: 18px;
    --text-body-lg-lh: 28px;

    --text-body-md: 16px;
    --text-body-md-lh: 24px;

    --text-label-caps: 14px;
    --text-label-caps-lh: 20px;
    --text-label-caps-ls: 0.1em;

    --text-label-sm: 12px;
    --text-label-sm-lh: 16px;

    /* ─── Сетка и отступы ─────────────────────────────────────── */
    --unit: 4px;
    --gutter: 24px;
    --margin-page: 16px;      /* мобила; на десктопе переопределяется ниже */
    --margin-desktop: 64px;
    --container-max: 1200px;

    /* ─── Радиусы ─────────────────────────────────────────────── */
    --radius-sm: 0.25rem;     /* 4px  — кнопки */
    --radius: 0.5rem;         /* 8px  — карточки, инпуты */
    --radius-md: 0.75rem;
    --radius-lg: 1rem;        /* 16px — крупные секции, модалки */
    --radius-xl: 1.5rem;
    --radius-full: 9999px;    /* чипы, теги */

    /* ─── Тени ────────────────────────────────────────────────── */
    /* По DESIGN.md тени почти не используются, а если да — тонированы бордо,
       не чёрным. Иерархия строится на тонких рамках и тональных слоях. */
    --shadow-float: 0 8px 32px rgba(74, 14, 14, 0.08);
    --shadow-card: 0 2px 12px rgba(74, 14, 14, 0.06);

    /* ─── Анимация ────────────────────────────────────────────── */
    --transition: 0.3s ease;
    --transition-slow: 0.7s ease;

    /* ─── Слои ────────────────────────────────────────────────── */
    --z-header: 50;
    --z-dropdown: 60;
    --z-lightbox: 100;
}

@media (min-width: 768px) {
    :root {
        --margin-page: var(--margin-desktop);
    }
}

/* На узких экранах крупная типографика ужимается, иначе 80px-заголовок
   рвёт вёрстку и переносится посреди слова (как в исходном макете Stitch). */
@media (max-width: 767px) {
    :root {
        --text-display-xl: 44px;
        --text-display-xl-lh: 46px;
        --text-headline-lg: var(--text-headline-lg-mobile);
        --text-headline-lg-lh: var(--text-headline-lg-mobile-lh);
        --text-headline-md: 26px;
        --text-headline-md-lh: 30px;
    }
}