/* =====================================================================
   Александр Королёв — Юридическая практика
   design-system.css  —  ЕДИНЫЙ ИСТОЧНИК ИСТИНЫ
   ---------------------------------------------------------------------
   Здесь живут ВСЕ дизайн-токены проекта. style.css и стили будущих
   секций обязаны использовать только переменные отсюда — без «магических»
   значений в компонентах.

   Содержание:
     1.  Цветовая палитра (сырые оттенки)
     2.  Семантические цвета (роли)
     3.  Типографика (семейства, размеры, веса, интерлиньяж, трекинг)
     4.  Spacing scale (шкала отступов)
     5.  Border radius (скругления)
     6.  Тени
     7.  Контейнеры
     8.  Сетка (grid)
     9.  Брейкпоинты (для справки и JS)
     10. Z-index слои
     11. Анимации (длительности, easing, переходы)
     12. Состояния: hover / focus (фокус-кольцо)
     13. Базовые утилиты, использующие токены
   ===================================================================== */

:root {

    /* ============================================================
       1. ЦВЕТОВАЯ ПАЛИТРА — сырые оттенки (не используются в компонентах напрямую)
       ============================================================ */

    /* Брендовый синий (navy) */
    --navy-900: #0f1f3a;
    --navy-800: #132545;
    --navy-700: #15294a;
    --navy-600: #1b3056;
    --navy-500: #243d68;
    --navy-400: #3a5180;

    /* Брендовый акцент — холодный синий (заменил прежнее «золото»).
       Имена переменных сохранены ради совместимости со всеми компонентами,
       но значения теперь строго в бело-синей палитре. */
    --gold-700: #214a86;   /* strong muted blue — eyebrow'ы, лейблы, акцент-текст */
    --gold-600: #2f5e9c;   /* muted blue — основной акцент (иконки, номера) */
    --gold-500: #7ea0cb;   /* soft / light blue — hover-границы и линии */
    --gold-400: #aec6e3;   /* pale blue */

    /* Нейтральная шкала */
    --neutral-0:   #ffffff;
    --neutral-50:  #f7f8fa;
    --neutral-100: #eef1f5;
    --neutral-200: #e2e7ee;
    --neutral-300: #d9dee6;
    --neutral-400: #b9c0cc;
    --neutral-500: #8a93a3;
    --neutral-600: #5d6675;
    --neutral-700: #3c4453;
    --neutral-800: #1d2a40;
    --neutral-900: #11192a;

    /* Статусные (на будущее: формы, уведомления) */
    --green-500:  #2e8a5f;
    --red-500:    #c0492f;
    --amber-500:  #c89227;


    /* ============================================================
       2. СЕМАНТИЧЕСКИЕ ЦВЕТА — роли (используем ИХ в компонентах)
       ============================================================ */
    --color-navy:        var(--navy-700);
    --color-navy-deep:   var(--navy-900);
    --color-navy-soft:   var(--navy-600);

    --color-gold:        var(--gold-600);
    --color-gold-soft:   var(--gold-500);
    --color-gold-strong: var(--gold-700);

    --color-text:        var(--neutral-800);
    --color-text-muted:  var(--neutral-600);
    --color-text-invert: var(--neutral-0);

    --color-bg:          var(--neutral-100);
    --color-bg-light:    var(--neutral-50);
    --color-surface:     var(--neutral-0);
    --color-white:       var(--neutral-0);
    --color-border:      var(--neutral-300);
    --color-border-strong: var(--neutral-400);

    --color-success:     var(--green-500);
    --color-error:       var(--red-500);
    --color-warning:     var(--amber-500);

    /* Прозрачные подложки (оверлеи, стекло) */
    --overlay-bg:        rgba(238, 241, 245, 0.85);
    --overlay-navy:      rgba(15, 31, 58, 0.55);


    /* ============================================================
       3. ТИПОГРАФИКА
       ============================================================ */
    --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Размеры — флюидные (clamp: min, предпочт., max) */
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 16px;
    --fs-md:   clamp(17px, 1.4vw, 19px);
    --fs-lg:   clamp(19px, 1.8vw, 22px);
    --fs-xl:   clamp(22px, 2.4vw, 28px);
    --fs-2xl:  clamp(26px, 3.2vw, 36px);
    --fs-3xl:  clamp(32px, 4.2vw, 48px);
    --fs-4xl:  clamp(38px, 5vw, 64px);

    /* Веса */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;

    /* Интерлиньяж */
    --lh-tight:    1.12;
    --lh-snug:     1.3;
    --lh-normal:   1.5;
    --lh-relaxed:  1.6;

    /* Трекинг (letter-spacing) */
    --ls-tighter: -0.01em;
    --ls-normal:   0;
    --ls-wide:     0.08em;
    --ls-wider:    0.14em;
    --ls-widest:   0.18em;


    /* ============================================================
       4. SPACING SCALE — база 4px
       ============================================================ */
    --space-0:   0;
    --space-1:   4px;
    --space-2:   8px;
    --space-3:   12px;
    --space-4:   16px;
    --space-5:   20px;
    --space-6:   24px;
    --space-7:   28px;
    --space-8:   32px;
    --space-10:  40px;
    --space-12:  48px;
    --space-16:  64px;
    --space-20:  80px;
    --space-24:  96px;
    --space-32:  128px;

    /* Вертикальные отступы секций */
    --section-py: clamp(64px, 9vw, 128px);


    /* ============================================================
       5. BORDER RADIUS
       ============================================================ */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;


    /* ============================================================
       6. ТЕНИ
       ============================================================ */
    --shadow-xs:   0 1px 2px rgba(17, 25, 42, 0.06);
    --shadow-sm:   0 4px 12px rgba(17, 25, 42, 0.08);
    --shadow-md:   0 10px 24px rgba(21, 41, 74, 0.10);
    --shadow-lg:   0 18px 40px rgba(21, 41, 74, 0.12);
    --shadow-xl:   0 30px 60px rgba(15, 31, 58, 0.16);
    --shadow-soft: var(--shadow-lg);              /* алиас для совместимости */
    --shadow-gold: 0 12px 28px rgba(47, 94, 156, 0.28);   /* cool blue glow (бывш. золото) */


    /* ============================================================
       7. КОНТЕЙНЕРЫ
       ============================================================ */
    --container-sm:   720px;
    --container-md:   960px;
    --container-lg:   1140px;
    --container-xl:   1280px;
    --container-max:  var(--container-xl);
    --container-pad:  40px;        /* боковые поля (перекрывается в media) */

    --header-height:  96px;


    /* ============================================================
       8. СЕТКА (GRID)
       ============================================================ */
    --grid-columns: 12;
    --grid-gap:     24px;
    --grid-gap-lg:  40px;


    /* ============================================================
       9. БРЕЙКПОИНТЫ — для справки и чтения из JS
       (в @media нельзя использовать var(), значения дублируются вручную)
       ============================================================ */
    --bp-xs:  480px;
    --bp-sm:  600px;
    --bp-md:  900px;
    --bp-lg:  1100px;
    --bp-xl:  1280px;


    /* ============================================================
       10. Z-INDEX СЛОИ
       ============================================================ */
    --z-base:     0;
    --z-content:  10;
    --z-header:   100;
    --z-overlay:  500;
    --z-modal:    1000;
    --z-toast:    1500;


    /* ============================================================
       11. АНИМАЦИИ
       ============================================================ */
    --ease:         cubic-bezier(0.4, 0, 0.2, 1);   /* стандартный */
    --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);  /* появление */
    --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
    --ease-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);

    --duration-fast:   0.15s;
    --duration-base:   0.25s;
    --duration-slow:   0.4s;
    --duration-slower: 0.7s;

    /* Готовые переходы */
    --transition:        var(--duration-base) var(--ease);
    --transition-fast:   var(--duration-fast) var(--ease);
    --transition-colors: color var(--transition),
                         background-color var(--transition),
                         border-color var(--transition);


    /* ============================================================
       12. СОСТОЯНИЯ: HOVER / FOCUS
       ============================================================ */
    --hover-lift:        -2px;                     /* сдвиг по Y при наведении */
    --hover-opacity:     0.85;

    --focus-ring-color:  var(--gold-600);
    --focus-ring-width:  3px;
    --focus-ring-offset: 3px;
    --focus-ring:        0 0 0 var(--focus-ring-width) rgba(47, 94, 156, 0.45);
}


/* =====================================================================
   13. БАЗОВЫЕ УТИЛИТЫ, ИСПОЛЬЗУЮЩИЕ ТОКЕНЫ
   ===================================================================== */

/* Контейнер */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}
.container--narrow { max-width: var(--container-md); }
.container--wide   { max-width: var(--container-xl); }

/* 12-колоночная сетка (для будущих секций) */
.grid {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gap);
}
.grid--gap-lg { gap: var(--grid-gap-lg); }

/* Глобальное focus-состояние: видно только при навигации с клавиатуры */
:focus-visible {
    outline: var(--focus-ring-width) solid var(--focus-ring-color);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-xs);
}
:focus:not(:focus-visible) { outline: none; }

/* Уважение к настройке «уменьшить движение» */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}