/* ==========================================================
   Finance Design Tokens
   Единственный источник цветов темы.
   Все компоненты используют ТОЛЬКО эти переменные.
   Прямые HEX-коды в компонентах запрещены.
   ========================================================== */

:root {

    /* ── Brand ───────────────────────────────────────────── */

    --brand-primary:        #0B3B78;
    --brand-primary-hover:  #082F61;
    --brand-primary-active: #07274F;

    --brand-secondary:        #127C78;
    --brand-secondary-hover:  #0F6764;
    --brand-secondary-active: #0D5654;

    --brand-accent:        #E5A62A;
    --brand-accent-hover:  #D8981E;
    --brand-accent-active: #BC8415;

    /* ── Semantic ─────────────────────────────────────────── */

    --color-success: #1D7A4A;
    --color-warning: #9A5B13;
    --color-danger:  #C23A3A;

    /* ── Backgrounds ──────────────────────────────────────── */

    --color-background:   #F7F9FC;
    --color-surface:      #FFFFFF;
    --color-surface-soft: #F4F7FB;

    /* ── Typography ───────────────────────────────────────── */

    --text-primary:   #142033;
    --text-secondary: #5B6678;
    --text-muted:     #8B95A7;

    /* ── Links ─────────────────────────────────────────────── */

    --link:        #0F5BD9;
    --link-hover:  #0C4AB0;
    --link-active: #083B8C;

    /* ── Borders ──────────────────────────────────────────── */

    --border-strong: #7E90A7;
    --border-subtle: #D8E0EA;

    /* ── Focus ─────────────────────────────────────────────── */

    --focus-ring:       #B97800;
    --focus-ring-inner: #FFFFFF;

    /* ── Disabled ─────────────────────────────────────────── */

    --disabled-bg:   #D4DBE5;
    --disabled-text: #7B8594;

    /* ── Shadows ───────────────────────────────────────────── */

    --shadow-card:       0 8px 24px rgba(20, 32, 51, 0.06);
    --shadow-card-hover: 0 16px 40px rgba(20, 32, 51, 0.10);
    --shadow-lg:         0 24px 60px rgba(20, 32, 51, 0.14);
    --shadow-header:     0 2px 20px rgba(20, 32, 51, 0.08);
    --shadow-dropdown:   0 8px 30px rgba(20, 32, 51, 0.10);
    --shadow-mega:       0 20px 60px rgba(20, 32, 51, 0.10);

    /* ── Radii ──────────────────────────────────────────────── */

    --radius-card:  16px;
    --radius-btn:   12px;
    --radius-input: 12px;
    --radius-badge: 999px;

    /* ── Alerts ────────────────────────────────────────────── */

    --alert-success-bg:   var(--color-success);
    --alert-success-text: var(--color-surface);

    --alert-warning-bg:     rgba(154, 91, 19, 0.10);
    --alert-warning-border: rgba(154, 91, 19, 0.35);
    --alert-warning-text:   var(--color-warning);

    --alert-danger-bg:     rgba(194, 58, 58, 0.10);
    --alert-danger-border: rgba(194, 58, 58, 0.35);
    --alert-danger-text:   var(--color-danger);

    /* ── Icons ──────────────────────────────────────────────── */

    --icon-default: var(--text-secondary);
    --icon-hover:   var(--brand-primary);
    --icon-success: var(--color-success);
    --icon-warning: var(--color-warning);
    --icon-danger:  var(--color-danger);

    /* ── Utility tints (градиенты, подложки, бейджи) ─────── */
    /* Используются только в конкретных задокументированных местах */

    --brand-glow:          rgba(11, 59, 120, 0.08);
    --brand-glow-sm:       rgba(11, 59, 120, 0.05);
    --brand-label-bg:      rgba(11, 59, 120, 0.07);
    --brand-label-border:  rgba(11, 59, 120, 0.18);
    --brand-label-text:    var(--brand-primary);
    --brand-row-hover:     rgba(11, 59, 120, 0.03);

    --brand-accent-glow-sm: rgba(229, 166, 42, 0.15);

    --badge-offer-bg:   var(--brand-accent);
    --badge-offer-text: var(--text-primary);

    /* ── Table ──────────────────────────────────────────────── */

    --table-header-bg:  var(--color-background);
    --table-header-text:var(--text-primary);
    --table-divider:    var(--border-subtle);
    --table-row-hover:  var(--brand-row-hover);

    /* ── Form ───────────────────────────────────────────────── */

    --form-bg:          var(--color-surface);
    --form-border:      var(--border-strong);
    --form-focus:       var(--focus-ring);
    --form-placeholder: var(--text-secondary);
    --form-label:       var(--text-primary);

    /* ── CTA ────────────────────────────────────────────────── */

    --cta-primary-bg:       var(--brand-primary);
    --cta-primary-bg-hover: var(--brand-primary-hover);
    --cta-primary-text:     var(--color-surface);

    --cta-secondary-bg:     var(--color-surface);
    --cta-secondary-border: var(--brand-secondary);
    --cta-secondary-text:   var(--brand-secondary);

    /* ── Semantic dark variants (text on subtle bg) ──────── */

    --color-info:         var(--link);
    --color-success-dark: #145234;
    --color-danger-dark:  #8B2222;

    /* ── Article / badge background tokens ───────────────── */
    /* Точные цвета для категорийных бейджей и инфо-карточек */

    --badge-info-bg:      #eff6ff;
    --badge-info-text:    var(--link);
    --badge-info-border:  #dbeafe;

    --badge-success-bg:   #dcfce7;
    --badge-success-text: var(--color-success-dark);

    --badge-warning-bg:   #fef9c3;
    --badge-warning-text: var(--color-warning);

    --badge-danger-bg:    #fef2f2;
    --badge-danger-text:  var(--color-danger-dark);

    --badge-guide-bg:     #f3e8ff;
    --badge-guide-text:   #6b21a8;

    /* ── Extended Radius Scale ──────────────────────────── */

    --radius-xs:    4px;
    --radius-sm:    8px;
    --radius-md:    12px;
    --radius-lg:    16px;
    --radius-xl:    20px;
    --radius-2xl:   24px;
    --radius-round: 999px;

    /* ── Extended Shadow Scale ──────────────────────────── */

    --shadow-xs:      0 1px 4px rgba(20, 32, 51, 0.04);
    --shadow-overlay: 0 20px 50px rgba(20, 32, 51, 0.12);
    --shadow-xl:      0 32px 80px rgba(20, 32, 51, 0.18);

    /* CTA coloured glows */
    --shadow-primary-glow:   0 8px 30px rgba(11, 59, 120, 0.30);
    --shadow-secondary-glow: 0 8px 30px rgba(18, 124, 120, 0.30);
    --shadow-accent-glow:    0 8px 30px rgba(229, 166, 42, 0.30);
    --shadow-success-glow:   0 8px 30px rgba(29, 122, 74, 0.30);

    /* Focus ring shadow */
    --focus-ring-shadow: 0 0 0 3px rgba(185, 120, 0, 0.12);

    /* ── Overlay colours (semi-transparent fills) ─────── */

    --overlay-sm: rgba(20, 32, 51, 0.08);

    /* ── Frosted glass (CTA buttons on gradient bg) ────── */

    --frosted-xs:           rgba(255, 255, 255, 0.04);
    --frosted-highlight:    rgba(255, 255, 255, 0.20);
    --frosted-bg:           rgba(255, 255, 255, 0.15);
    --frosted-bg-hover:     rgba(255, 255, 255, 0.25);
    --frosted-border:       rgba(255, 255, 255, 0.35);
    --frosted-border-hover: rgba(255, 255, 255, 0.60);
    --frosted-text:         rgba(255, 255, 255, 0.86);
    --frosted-text-sm:      rgba(255, 255, 255, 0.90);
    --frosted-text-muted:   rgba(255, 255, 255, 0.78);
    --frosted-dark-border:  rgba(255, 255, 255, 0.12);

    /* ── Overlay / scrim ─────────────────────────────────── */

    --scrim:         rgba(20, 32, 51, 0.50);
    --shadow-drawer: -4px 0 40px rgba(20, 32, 51, 0.15);

    /* ── Spacing Scale ──────────────────────────────────── */

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

    /* ── Transitions ─────────────────────────────────────── */

    --transition-fast:   0.12s ease;
    --transition-normal: 0.20s ease;
    --transition-slow:   0.35s ease;

    /* ── Container sizes ─────────────────────────────────── */

    --container:         1280px;
    --container-wide:    1440px;
    --container-xl:      1600px;

    --container-padding: 32px;

    /* ── Section spacing ──────────────────────────────────── */

    --section-padding-y:    72px;
    --section-padding-y-sm: 56px;

    /* ── Typography — fonts ───────────────────────────────── */

    --font-heading: 'Plus Jakarta Sans', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* ── Typography — sizes ───────────────────────────────── */

    --font-size-h1:    52px;
    --font-size-h2:    36px;
    --font-size-h3:    22px;
    --font-size-body:  16px;
    --font-size-small: 13px;

    /* ── Typography — line heights ────────────────────────── */

    --line-height-heading: 1.12;
    --line-height-body:    1.6;

    /* ── Typography — letter spacing ──────────────────────── */

    --letter-spacing-h1:      -1.5px;
    --letter-spacing-h2:      -1px;
    --letter-spacing-h3:      -0.8px;
    --letter-spacing-caption:  1.5px;

    /* ── Header ──────────────────────────────────────────── */

    --header-sticky-bg: rgba(255, 255, 255, 0.95);

    /* ── Footer colours ───────────────────────────────────── */

    --footer-bg:   var(--text-primary);
    --footer-text: var(--color-surface);

    /* ── Brand extended ───────────────────────────────────── */

    --brand-primary-dark: #07274F;
}