/* =====================================================================
 * 01 — DESIGN TOKENS
 * Фундамент дизайн-системи. CSS Custom Properties (змінні).
 * Усі компоненти посилаються на ці значення.
 * Один файл — глобальна зміна теми.
 * ===================================================================== */

:root {
    /* ---------- ПАЛІТРА: сакральна елегантність ---------- */

    /* Marian Blue — глибокий синій Богородиці. Шапка, акценти, посилання */
    --sm-blue:          #1e3a5f;
    --sm-blue-deep:     #142a47;
    --sm-blue-soft:     #2c4f7a;
    --sm-blue-light:    #e8eef5;

    /* Antique Gold — золоті акценти. Кнопки, лінії, monogram */
    --sm-gold:          #b8945e;
    --sm-gold-deep:     #9a7b4a;
    --sm-gold-soft:     #d4b685;
    --sm-gold-light:    #f5ecdc;

    /* Cream — теплий пергаментний фон сайту */
    --sm-cream:         #faf6ee;
    --sm-cream-deep:    #f0e9d8;
    --sm-cream-soft:    #fdfaf3;

    /* Charcoal — основний колір тексту */
    --sm-charcoal:      #202020;
    --sm-charcoal-soft: #4a4a4a;
    --sm-gray:          #6b6b6b;
    --sm-gray-light:    #d8d8d8;
    --sm-gray-bg:       #f4f4f4;

    /* Soft Lavender — додатковий акцент для категорій */
    --sm-lavender:      #9a8fb8;

    /* Status colors */
    --sm-success:       #4a8a5e;
    --sm-warning:       #c9a961;
    --sm-error:         #b85450;

    /* White / Black */
    --sm-white:         #ffffff;
    --sm-black:         #000000;

    /* ---------- ШРИФТИ ---------- */

    --sm-font-headings: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --sm-font-quotes:   'Cormorant Garamond', Georgia, serif;
    --sm-font-meta:     'Lora', Georgia, serif;
    --sm-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* ---------- ТИПОГРАФІЧНА ШКАЛА (modular scale 1.250) ---------- */

    --sm-text-xs:    13px;   /* мета, дати */
    --sm-text-sm:    14px;   /* категорії, badges */
    --sm-text-base:  17px;   /* основний body */
    --sm-text-lg:    19px;   /* lead paragraph */
    --sm-text-xl:    22px;   /* h4 */
    --sm-text-2xl:   28px;   /* h3 */
    --sm-text-3xl:   36px;   /* h2 */
    --sm-text-4xl:   46px;   /* h1 */
    --sm-text-5xl:   58px;   /* hero */

    /* Line heights */
    --sm-leading-tight:   1.2;
    --sm-leading-snug:    1.4;
    --sm-leading-normal:  1.6;
    --sm-leading-relaxed: 1.7;
    --sm-leading-loose:   2;

    /* Letter spacing */
    --sm-tracking-tight:  -0.02em;
    --sm-tracking-normal: 0;
    --sm-tracking-wide:   0.04em;
    --sm-tracking-wider:  0.08em;
    --sm-tracking-widest: 0.15em;

    /* ---------- SPACING (8-point grid) ---------- */

    --sm-space-1:  4px;
    --sm-space-2:  8px;
    --sm-space-3:  12px;
    --sm-space-4:  16px;
    --sm-space-5:  24px;
    --sm-space-6:  32px;
    --sm-space-7:  48px;
    --sm-space-8:  64px;
    --sm-space-9:  96px;
    --sm-space-10: 128px;

    /* ---------- LAYOUT ---------- */

    --sm-container-xs:  640px;
    --sm-container-sm:  768px;
    --sm-container-md:  1024px;
    --sm-container-lg:  1200px;
    --sm-container-xl:  1280px;

    --sm-content-width: 720px;        /* читання — оптимальна ширина */

    --sm-header-height: 80px;
    --sm-header-height-mobile: 60px;

    /* ---------- BORDERS & RADIUS ---------- */

    --sm-radius-none:   0;
    --sm-radius-sm:     2px;
    --sm-radius-md:     4px;
    --sm-radius-lg:     8px;
    --sm-radius-xl:     12px;
    --sm-radius-full:   9999px;

    --sm-border-thin:   1px solid var(--sm-gray-light);
    --sm-border-gold:   1px solid var(--sm-gold);
    --sm-border-blue:   1px solid var(--sm-blue);

    /* ---------- SHADOWS (преміальні, м'які) ---------- */

    --sm-shadow-xs:  0 1px 2px rgba(30, 58, 95, 0.04);
    --sm-shadow-sm:  0 2px 8px rgba(30, 58, 95, 0.06);
    --sm-shadow-md:  0 4px 16px rgba(30, 58, 95, 0.08);
    --sm-shadow-lg:  0 8px 32px rgba(30, 58, 95, 0.12);
    --sm-shadow-xl:  0 16px 48px rgba(30, 58, 95, 0.16);

    /* Inset (для "виритого" вигляду) */
    --sm-shadow-inset: inset 0 2px 4px rgba(30, 58, 95, 0.06);

    /* Gold glow */
    --sm-shadow-gold: 0 4px 24px rgba(184, 148, 94, 0.25);

    /* ---------- TRANSITIONS ---------- */

    --sm-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --sm-transition-base:   250ms cubic-bezier(0.4, 0, 0.2, 1);
    --sm-transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);
    --sm-transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* ---------- Z-INDEX (передбачена шкала) ---------- */

    --sm-z-base:     1;
    --sm-z-dropdown: 100;
    --sm-z-sticky:   200;
    --sm-z-overlay:  300;
    --sm-z-modal:    400;
    --sm-z-popover:  500;
    --sm-z-tooltip:  600;
    --sm-z-top:      9999;

    /* ---------- ASPECT RATIOS ---------- */

    --sm-aspect-square:   1 / 1;
    --sm-aspect-video:    16 / 9;
    --sm-aspect-card:     3 / 2;       /* для карток новин */
    --sm-aspect-portrait: 4 / 5;
    --sm-aspect-cinema:   21 / 9;      /* для hero */

    /* ---------- BREAKPOINTS (для довідки в коментарях) ---------- */
    /*
     * mobile-xs: до 360px
     * mobile:    361–480px
     * tablet:    481–768px
     * laptop:    769–1024px
     * desktop:   1025–1440px
     * wide:      1441px+
     */
}

/* ---------- DARK MODE — заздалегідь, для майбутнього ---------- */
@media (prefers-color-scheme: dark) {
    :root.sm-allow-dark {
        --sm-cream:        #1a1d23;
        --sm-cream-deep:   #14171c;
        --sm-cream-soft:   #20242b;
        --sm-charcoal:     #f0ece4;
        --sm-charcoal-soft: #c8c4bc;
        --sm-blue:         #4a7ab8;
        --sm-blue-light:   #2a3142;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    :root {
        --sm-transition-fast:   0ms;
        --sm-transition-base:   0ms;
        --sm-transition-slow:   0ms;
        --sm-transition-spring: 0ms;
    }
}