/*
 * brand.css — Янків.Dok Design System
 *
 * Джерело: візуальна ідентифікація Юридичної компанії YANKIV.
 * Усі інші CSS-файли беруть значення звідси — нічого не хардкодиться.
 *
 * СТРУКТУРА
 *  1. Кольори бренду
 *  2. Семантичні кольорові ролі
 *  3. Типографіка
 *  4. Радіуси
 *  5. Тіні
 *  6. Відступи
 *  7. Перехідні анімації
 */

:root {

    /* ─── 1. BRAND PALETTE ──────────────────────────────────── */

    /* Синій (домінантний бренд-колір) */
    --brand-blue-900: #1E2B78;
    --brand-blue-800: #2D3D94;
    --brand-blue-700: #3549AD;
    --brand-blue-600: #4255BA;   /* ← базовий акцент (hero, кнопки, nav) */
    --brand-blue-500: #5168C8;
    --brand-blue-400: #7A90DA;
    --brand-blue-200: #C4CFEF;
    --brand-blue-100: #DDE4F7;
    --brand-blue-50:  #EBF0FF;

    /* Жовтий (нотифікаційна смуга, badge) */
    --brand-yellow-600: #D4A800;
    --brand-yellow-500: #F5C842;
    --brand-yellow-300: #FFE589;

    /* Нейтральний */
    --brand-neutral-950: #0F1120;
    --brand-neutral-900: #1A1E30;
    --brand-neutral-700: #3B405A;
    --brand-neutral-500: #5B6482;
    --brand-neutral-400: #8892B0;
    --brand-neutral-200: #CBD2E8;
    --brand-neutral-100: #E3E8F4;
    --brand-neutral-50:  #F5F7FB;
    --brand-neutral-0:   #FFFFFF;

    /* Небезпека */
    --brand-danger-700: #9B1C1C;
    --brand-danger-600: #B42318;
    --brand-danger-100: #FEE2E2;
    --brand-danger-50:  #FFF5F5;

    /* Успіх */
    --brand-success-700: #065F46;
    --brand-success-600: #067647;
    --brand-success-100: #D1FAE5;

    /* ─── 2. СЕМАНТИЧНІ РОЛІ ───────────────────────────────── */

    /* Фони */
    --color-bg:           var(--brand-neutral-50);
    --color-panel:        var(--brand-neutral-0);
    --color-panel-alt:    #F0F3FB;

    /* Текст */
    --color-ink:          var(--brand-neutral-900);
    --color-muted:        var(--brand-neutral-500);
    --color-on-brand:     var(--brand-neutral-0);

    /* Бордери */
    --color-line:         var(--brand-neutral-100);
    --color-line-focus:   var(--brand-blue-600);

    /* Акцент */
    --color-accent:       var(--brand-blue-600);
    --color-accent-dark:  var(--brand-blue-800);
    --color-accent-hover: var(--brand-blue-700);
    --color-accent-soft:  var(--brand-blue-50);

    /* Небезпека */
    --color-danger:       var(--brand-danger-600);
    --color-danger-bg:    var(--brand-danger-50);
    --color-danger-line:  var(--brand-danger-100);

    /* Успіх */
    --color-success:      var(--brand-success-600);
    --color-success-bg:   var(--brand-success-100);

    /* Жовтий */
    --color-yellow:       var(--brand-yellow-500);
    --color-yellow-text:  var(--brand-yellow-600);

    /* ─── 3. ТИПОГРАФІКА ───────────────────────────────────── */

    /* Шрифти */
    --font-sans:    'Inter', ui-sans-serif, system-ui, -apple-system,
                    BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-heading: 'Montserrat', 'Inter', ui-sans-serif, sans-serif;

    /* Розміри */
    --text-xs:   11px;
    --text-sm:   13px;
    --text-base: 15px;
    --text-md:   16px;
    --text-lg:   18px;
    --text-xl:   22px;
    --text-2xl:  28px;
    --text-3xl:  36px;
    --text-4xl:  48px;

    /* Товщина */
    --weight-regular:  400;
    --weight-medium:   500;
    --weight-semibold: 600;
    --weight-bold:     700;
    --weight-black:    800;

    /* Міжрядковий інтервал */
    --leading-tight:  1.25;
    --leading-snug:   1.35;
    --leading-normal: 1.5;
    --leading-loose:  1.7;

    /* ─── 4. РАДІУСИ ───────────────────────────────────────── */

    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;   /* кнопки, поля вводу */
    --radius-lg:   14px;   /* картки, панелі */
    --radius-xl:   20px;   /* модальні вікна */
    --radius-full: 9999px; /* pill badges */

    /* ─── 5. ТІНІ ──────────────────────────────────────────── */

    --shadow-xs: 0 1px 2px rgba(20, 30, 90, 0.06);
    --shadow-sm: 0 2px 6px rgba(20, 30, 90, 0.09);
    --shadow-md: 0 4px 16px rgba(20, 30, 90, 0.12);
    --shadow-lg: 0 12px 36px rgba(20, 30, 90, 0.16);
    --shadow-xl: 0 24px 60px rgba(20, 30, 90, 0.20);

    /* Кільце фокусу */
    --focus-ring: 0 0 0 3px rgba(66, 85, 186, 0.20);

    /* ─── 6. ВІДСТУПИ ──────────────────────────────────────── */

    --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;

    /* ─── 7. АНІМАЦІЇ ──────────────────────────────────────── */

    --transition-fast:    0.1s ease;
    --transition-base:    0.18s ease;
    --transition-slow:    0.3s ease;

}

/* ─── Google Fonts import ──────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800&family=Inter:wght@400;500;600;700;800&display=swap');