/* Belovode · tokens + base (секции 1–2)
   Часть brand.css — подключается в inc/assets.php.
   Источник истины: исторический разрез по секциям 1–26. */

/* =====================================================================
   Belovode — фирменный стиль v0.3
   Стилизация под курортную графику сталинской эпохи (30-50-е):
   плакаты ВЦСПС, этикетки Пищепрома, архитектура ВДНХ.
   Палитра «бумажная», типографика: Philosopher · Literata · Manrope.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. ТОКЕНЫ
   --------------------------------------------------------------------- */
:root {
    /* Палитра */
    --bel-bg:          #F7F1E5;   /* основной фон: «бумага» */
    --bel-bg-alt:      #EFE6D3;   /* льняной: плашки, карточки */
    --bel-bg-deep:     #E6DABE;   /* поле этикетки: афиши, постеры */
    --bel-ink:         #2B2018;   /* текст, заголовки */
    --bel-ink-soft:    #4A3A2E;   /* второстепенный текст */
    --bel-moss:        #6B7A4F;   /* санаторная зелень: ссылки */
    --bel-moss-dark:   #556338;
    --bel-ochre:       #B96D3D;   /* основной акцент */
    --bel-ochre-dark:  #9A5428;
    --bel-burgundy:    #7A2430;   /* CTA, «редкое важное» */
    --bel-burgundy-dark: #5C1C22;
    --bel-oak:         #8B6F47;   /* тонкие линии, капшены */
    --bel-oak-faded:   rgba(139, 111, 71, 0.28);
    --bel-oak-wash:    rgba(139, 111, 71, 0.08);
    --bel-gilt:        #A9824A;   /* «золочение», только орнамент */

    /* Шрифты */
    --bel-font-display: 'Philosopher', 'Literata', Georgia, serif;
    --bel-font-heading: 'Literata', Georgia, 'Times New Roman', serif;
    --bel-font-body:    'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --bel-font-mono:    'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;

    /* Метрики */
    --bel-radius:    2px;
    --bel-radius-lg: 4px;
    --bel-content-width: 960px;
    --bel-wide-width:    1240px;

    --bel-shadow-sm: 0 2px 8px rgba(43, 32, 24, 0.06);
    --bel-shadow-md: 0 10px 30px rgba(43, 32, 24, 0.10);

    /* Спейсинг */
    --bel-gap-s: 12px;
    --bel-gap-m: 24px;
    --bel-gap-l: 48px;

    /* Переопределение Astra */
    --ast-global-color-0: var(--bel-burgundy);
    --ast-global-color-1: var(--bel-ochre);
    --ast-global-color-2: var(--bel-ink);
    --ast-global-color-3: var(--bel-ink-soft);
    --ast-global-color-4: var(--bel-bg);
    --ast-global-color-5: var(--bel-bg-alt);
    --ast-global-color-6: var(--bel-moss);
    --ast-global-color-7: var(--bel-oak);
    --ast-body-font-family:    var(--bel-font-body);
    --ast-heading-font-family: var(--bel-font-heading);
}

/* ---------------------------------------------------------------------
   2. БАЗА
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    background: var(--bel-bg);
    scroll-behavior: smooth;
    overflow-x: clip;
}

body {
    background: var(--bel-bg);
    max-width: 100%;
    overflow-x: clip;
    color: var(--bel-ink);
    font-family: var(--bel-font-body);
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;

    /* Бумажная фактура: тёплые радиальные градиенты + очень лёгкий шум */
    background-image:
        radial-gradient(ellipse at 15% 8%,  rgba(185,109,61,0.035), transparent 55%),
        radial-gradient(ellipse at 85% 92%, rgba(107,122,79,0.04),  transparent 55%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.24  0 0 0 0 0.18  0 0 0 0 0.13  0 0 0 0.035 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
    background-attachment: fixed, fixed, scroll;
    background-repeat: no-repeat, no-repeat, repeat;
    background-size: auto, auto, 220px 220px;
}

::selection { background: var(--bel-ochre); color: var(--bel-bg); }

:focus-visible {
    outline: 2px solid var(--bel-ochre);
    outline-offset: 2px;
    border-radius: var(--bel-radius);
}