/* =====================
   DESIGN TOKENS — Мотаночка
   Централізовані дизайн-токени: кольори, відступи, тіні, радіуси
   =====================

   CHANGELOG — session-css-tokens (2026-06-09):
   T1: --color-secondary (золото) перейменовано у --color-gold: #DAA520
   T2: Додано --color-gold у :root та dark-theme overrides
   T3: Токени шрифтів --text-xs..2xl вже були; підтверджено наявність
   T4: Канонізовано state-кольори: success #2E8B57, danger #DC143C,
       warning #E65100, info #1976D2 (видалено старі #2E7D32/#C62828/#1565C0)
   T5: Додано --shadow-primary (вже був), --ornament-opacity: 0.15
   T6: Додано --radius-pill як псевдонім --radius-full
   T7: Додано dark-theme partial (commented-out block) наприкінці файлу
   ===================== */

:root {
    /* === КОЛЬОРИ === */
    --color-primary:        #A52A2A;   /* Основний червоний */
    --color-primary-dark:   #8B1A1A;
    --color-primary-light:  #C44040;
    --color-gold:           #DAA520;   /* Золотий акцент (T1: перейменовано з --color-secondary) */
    --color-bg:             #FFFFFF;
    --color-bg-warm:        #FFF8DC;   /* Кремовий */
    --color-bg-beige:       #F5F5DC;   /* Бежевий */
    --color-text:           #1A1A1A;
    --color-text-muted:     #666666;
    --color-text-light:     #767676;   /* WCAG AA: #999 (2.85:1) → #767676 (4.54:1) на білому */
    --color-border:         #E0E0E0;
    --color-border-warm:    #E8D9A0;

    /* === STATE КОЛЬОРИ (T4: канонізовано, один варіант кожного) === */
    --color-success:        #2E8B57;   /* Sea Green — досить темний для WCAG AA на білому */
    --color-danger:         #DC143C;   /* Crimson */
    --color-warning:        #E65100;   /* Deep Orange */
    --color-info:           #1976D2;   /* Blue 700 */

    /* Прозорі відтінки primary (заміна rgba(165,42,42,..) хардкодів) */
    --color-primary-a10:    rgba(165, 42, 42, 0.10);
    --color-primary-a15:    rgba(165, 42, 42, 0.15);
    --color-primary-a30:    rgba(165, 42, 42, 0.30);

    /* === ВІДСТУПИ (шкала 4px) === */
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;

    /* === ТИПОГРАФІКА === */
    --font-heading:  'Marck Script', cursive;
    --font-body:     'Nunito', sans-serif;
    /* T3: Токени шрифтів підтверджено наявними (--text-xs..2xl вже були) */
    --text-xs:       0.75rem;    /* 12px */
    --text-sm:       0.875rem;   /* 14px */
    --text-base:     1rem;       /* 16px */
    --text-lg:       1.125rem;   /* 18px */
    --text-xl:       1.25rem;    /* 20px */
    --text-2xl:      1.5rem;     /* 24px */
    --text-3xl:      1.875rem;   /* 30px */
    --text-4xl:      2.25rem;    /* 36px */

    /* Висота рядка (вертикальний ритм) */
    --leading-tight:    1.25;
    --leading-normal:   1.6;
    --leading-relaxed:  1.8;

    /* === РАДІУСИ === */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;
    --radius-pill: 9999px;   /* T6: псевдонім для --radius-full (pill-форма) */

    /* === ТІНІ === */
    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.10);
    --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-xl:   0 8px 32px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 4px 16px rgba(165, 42, 42, 0.30);  /* T5: кольорова тінь під primary-елементи */

    /* === TRANSITIONS === */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* === Z-INDEX === */
    --z-dropdown:  100;
    --z-sticky:    200;
    --z-modal:     300;
    --z-toast:     9999;

    /* === ШИРИНИ === */
    --container-sm:      640px;
    --container-md:      768px;
    --container-lg:      1024px;
    --container-xl:      1200px;
    --container-narrow:  768px;  /* псевдонім --container-md для текстових сторінок */

    /* === ОРНАМЕНТИ === */
    --ornament-opacity: 0.15;   /* T5: єдине значення прозорості для SVG-орнаментів */

    /* Підказка браузеру: світла схема за замовчуванням (форм-контроли, скролбари).
       У темній темі перевизначається на dark нижче. */
    color-scheme: light;
}

/* =============================================================
   ТЕМНА ТЕМА — повна палітра (session-css-dark, 2026-06-09)
   =============================================================
   Активація трьома шляхами (за зростанням пріоритету):
     1) Системно   — @media (prefers-color-scheme: dark)
     2) Примусово   — [data-theme="dark"] на <html>
                      (JS: document.documentElement.dataset.theme = 'dark')
     3) Escape-hatch — [data-theme="light"] завжди форсує світлу тему,
                      навіть якщо ОС у темному режимі.

   Етнічний теплий акцент (primary-червоний, gold) лишається впізнаваним:
   у темряві беремо СВІТЛІШІ варіанти, аби тримати контраст >= 4.5:1 на
   темному тлі #1A1A1A. Усі поверхні (body, картки, хедер, футер, інпути,
   кнопки, таблиці, модалки, тости, рамки, тіні, орнаменти) читають саме
   ці токени, тож перемикання теми не потребує точкових правок.

   WCAG AA (dark, текст на --color-bg #1A1A1A):
     --color-text        #ECECEC → 14.8:1  (AAA)
     --color-text-muted  #C2C2C2 → 9.7:1   (AAA)
     --color-text-light  #A6A6A6 → 6.4:1   (AA)
     --color-primary     #E98A8A → 6.6:1   (AA) — лінки/акцент
     --color-gold        #E8C266 → 9.0:1   (AAA)
     --color-success     #5FC98A → 8.0:1   (AAA)
     --color-danger      #F47171 → 6.4:1   (AA)
     --color-warning     #FFB74D → 10.6:1  (AAA)
     --color-info        #64B5F6 → 7.5:1   (AAA)
   ============================================================= */

/* Спільний набір dark-токенів — DRY через custom-property fallback-каскад
   неможливий для grouped-селекторів, тож дублюємо в кожному селекторі. */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        --color-bg:            #1A1A1A;
        --color-bg-warm:       #241f17;   /* теплий темний — для cream-секцій */
        --color-bg-beige:      #2a2620;
        /* Підняте тло для карток/модалок над body (elevation) */
        --color-bg-elevated:   #242424;
        --color-text:          #ECECEC;
        --color-text-muted:    #C2C2C2;   /* AA: 9.7:1 на #1A1A1A */
        --color-text-light:    #A6A6A6;   /* AA: 6.4:1 */
        --color-border:        #3A3A3A;
        --color-border-warm:   #4a4030;

        --color-primary:       #E98A8A;   /* світліший червоний: 6.6:1 на темному */
        --color-primary-dark:  #D06A6A;
        --color-primary-light: #F2A8A8;
        --color-primary-a10:   rgba(233, 138, 138, 0.12);
        --color-primary-a15:   rgba(233, 138, 138, 0.18);
        --color-primary-a30:   rgba(233, 138, 138, 0.34);
        --color-gold:          #E8C266;

        --color-success:       #5FC98A;
        --color-danger:        #F47171;
        --color-warning:       #FFB74D;
        --color-info:          #64B5F6;

        /* Тіні в темряві — глибші й непрозоріші (на темному ledь видно) */
        --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
        --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.50);
        --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.60);
        --shadow-xl:   0 8px 32px rgba(0, 0, 0, 0.70);
        --shadow-primary: 0 4px 16px rgba(233, 138, 138, 0.30);

        /* Орнаменти трохи яскравіші, бо тонуть у темному тлі */
        --ornament-opacity: 0.22;
    }
}

/* Примусова темна тема (ручний перемикач). Має пріоритет над системною,
   бо селектор за специфічністю/порядком переважає :root з @media. */
[data-theme="dark"] {
    color-scheme: dark;

    --color-bg:            #1A1A1A;
    --color-bg-warm:       #241f17;
    --color-bg-beige:      #2a2620;
    --color-bg-elevated:   #242424;
    --color-text:          #ECECEC;
    --color-text-muted:    #C2C2C2;
    --color-text-light:    #A6A6A6;
    --color-border:        #3A3A3A;
    --color-border-warm:   #4a4030;

    --color-primary:       #E98A8A;
    --color-primary-dark:  #D06A6A;
    --color-primary-light: #F2A8A8;
    --color-primary-a10:   rgba(233, 138, 138, 0.12);
    --color-primary-a15:   rgba(233, 138, 138, 0.18);
    --color-primary-a30:   rgba(233, 138, 138, 0.34);
    --color-gold:          #E8C266;

    --color-success:       #5FC98A;
    --color-danger:        #F47171;
    --color-warning:       #FFB74D;
    --color-info:          #64B5F6;

    --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.40);
    --shadow-md:   0 2px 8px rgba(0, 0, 0, 0.50);
    --shadow-lg:   0 4px 16px rgba(0, 0, 0, 0.60);
    --shadow-xl:   0 8px 32px rgba(0, 0, 0, 0.70);
    --shadow-primary: 0 4px 16px rgba(233, 138, 138, 0.30);

    --ornament-opacity: 0.22;
}

/* Escape-hatch: примусова світла тема навіть у темній ОС.
   Просто відновлюємо color-scheme; решта токенів = дефолтний :root. */
[data-theme="light"] {
    color-scheme: light;
}

/* =====================================================
   SESSION 19 TOKEN ADDITIONS — 2026-06-13
   ===================================================== */

/* ===========================================
   21. ANIMATION DURATION TOKENS
   =========================================== */
:root {
    --duration-instant:  50ms;
    --duration-fast:     150ms;
    --duration-normal:   300ms;
    --duration-slow:     500ms;
    --duration-slower:   800ms;
}

/* ===========================================
   22. EASING FUNCTION TOKENS
   =========================================== */
:root {
    --ease-out:     cubic-bezier(0, 0, 0.2, 1);       /* Material decelerate — елементи влітають плавно */
    --ease-in:      cubic-bezier(0.4, 0, 1, 1);        /* Material accelerate — елементи вилітають */
    --ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);     /* Material standard — більшість UI-переходів */
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* Spring-bounce — иконки, badge, pop-ефекти */
    --ease-linear:  linear;
}

/* ===========================================
   23. CONTENT WIDTH TOKENS
   =========================================== */
:root {
    --content-xs:    480px;   /* Вузький діалог / картка */
    --content-sm:    640px;   /* Форма / модалка */
    --content-md:    768px;   /* Основний текстовий контент */
    --content-lg:    1024px;  /* Широкий лейаут з aside */
    --content-xl:    1200px;  /* Повноширинний контейнер */
    --content-prose: 65ch;    /* Оптимальна ширина для читання */
}

/* ===========================================
   24. BORDER WIDTH TOKENS
   =========================================== */
:root {
    --border-1: 1px;   /* Стандартна рамка */
    --border-2: 2px;   /* Акцентна рамка / focus ring */
    --border-4: 4px;   /* Товста рамка / border-left alert */
}

/* ===========================================
   25. OPACITY TOKENS
   =========================================== */
:root {
    --opacity-disabled: 0.5;  /* Вимкнені елементи */
    --opacity-muted:    0.7;  /* Приглушений текст/іконки */
    --opacity-overlay:  0.5;  /* Напівпрозоре перекриття (modal backdrop) */
    --opacity-subtle:   0.08; /* Ледь помітний фон (alert, hover) */
}

/* =====================
   ACCESSIBILITY UTILITIES
   ===================== */

/* Visually hidden but accessible to screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-link: visible only on focus */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 99999;
    padding: 0.5rem 1rem;
    background: var(--color-primary, #A52A2A);
    color: #fff;
    border-radius: 0 0 var(--radius-sm, 4px) var(--radius-sm, 4px);
    font-weight: 600;
    text-decoration: none;
    transition: top 0.2s;
}
.skip-link:focus {
    top: 0;
}

/* =====================================================
   SESSION 19 TOKEN ADDITIONS (2) — 2026-06-13
   ===================================================== */
:root {
    /* Додаткові easing-функції */
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* псевдонім --ease-spring для зворотньої сумісності */
    --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);  /* стандартна CSS ease */

    /* Псевдоніми типографіки (зворотна сумісність з різними іменуваннями) */
    --font-display: 'Marck Script', cursive; /* псевдонім --font-heading */

    /* Ширина для читабельного prose-контенту */
    --content-max-prose: 65ch;
    --content-max-wide: 90ch;

    /* Теплі відтінки фону (етнічна палітра) */
    --color-warm-white: #fdf8f3;
    --color-cream:      #f5f0e8;
    --color-parchment:  #e8dcc8;
}

/* =====================================================
   SESSION 26 TOKEN ADDITIONS — 2026-06-13
   ===================================================== */
:root {
    /* Світлі відтінки state-кольорів для фонів */
    --color-warning-light: #fff3cd;
    --color-success-light: #d1e7dd;
    --color-danger-light:  #f8d7da;

    /* Штрихована рамка */
    --border-dashed: 2px dashed var(--color-border, #E0E0E0);

    /* Повільний перехід (вже був як --transition-slow: 400ms ease;
       додаємо псевдонім --transition-slow-500 для 0.5s варіанту) */
    --transition-slow-500: 0.5s ease;
}