/* ============================================================
   home.tokens.css — design tokens для главной gccybersecurity.ai
   Источник: Figma EmtechGC--Copy- (ZbYQaOculpsPcAD5PZ2sy9), variables

   ПОЛИТИКА (CONVENTIONS §1, §12, обновлено 2026-05-25 / Phase 1.5):
   - Палитра                — токен (имена 1:1 с Figma variables)
   - Шрифт-семейство        — токен
   - Типографические pre-set'ы (Headline 1..5, Headline card 1..5,
     Text 2..5, Caption 1..2, Tag, Button, Label) — токены fixed px
     (так в Figma — нет «mobile/desktop» вариантов, есть РАЗНЫЕ
     headline-уровни; каждая секция берёт нужный).
   - Радиусы общеупотребимые — токен
   - Border thickness/color  — токен
   - ❌ Spacing-шкала упразднена. padding/gap/margin/width/height
     снимаются inline в home.css с комментарием Figma nodeId.
   - ❌ Никаких fluid clamp() в токенах. Где нужен scale между
     m/d вариантами — пишется clamp() inline в секции с комментарием
     (см. §2 CONVENTIONS, Utopia-формула).
   ============================================================ */

/* Google Fonts — заменить на @font-face когда придут лицензированные .woff2 */
@import url('https://fonts.googleapis.com/css2?family=Syne:wght@500;700;800&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;700&display=swap');

.home-page {

    /* ──────── ПАЛИТРА (1:1 Figma variables) ──────── */

    /* фоны */
    --c-bg:             #030C12;  /* Blue/Black Blue */
    --c-bg-card:        #1A2236;  /* Blue/Dark Grey Blue */
    --c-bg-card-d:      #0A0E1A;  /* Blue/Blue Black */
    --c-bg-aqua:        #091624;  /* Aquamarine/Aquamarine Black */
    --c-bg-aqua-d:      #08242F;  /* Aquamarine/Dark Aquamarine */
    --c-bg-aqua-grey:   #073754;  /* Aquamarine/Aquamarine Grey — outline borders */
    --c-bg-green:       #0B2326;  /* Green/Green Black */

    /* текст */
    --c-text:           #F1F5FF;  /* Basic/White */
    --c-text-grey:      #7AA8C4;  /* Blue/Light Grey Blue */
    --c-text-grey-2:    #94A3B8;  /* Basic/Grey */
    --c-text-mute:      #3D6880;  /* Blue/Grey Blue */
    --c-text-dark:      #4C5362;  /* Basic/Dark Grey */

    /* акценты */
    --c-blue:           #00AAFF;  /* Light Blue */
    --c-aqua:           #22D3EE;  /* Aquamarine/Aquamarine */
    --c-red:            #FF6060;  /* Red/Red */
    --c-red-d:          #9B362E;  /* Red/Medium Red */
    --c-red-dd:         #59231F;  /* Red/Dark Red */
    --c-red-bg:         #120F13;  /* Red/Black Red */
    --c-red-brown:      #271A27;  /* Red/Brown Red */
    --c-orange:         #FFAA00;
    --c-purple:         #A78BFA;
    --c-green:          #34D399;  /* Green/Green */
    --c-green-d:        #0D5F4A;  /* Green/Dark Green */
    --c-gold:           #EFBD55;

    /* ──────── ШРИФТЫ ──────── */

    --ff-display:   'Syne', system-ui, sans-serif;             /* Headline 1..5, Tag, Headline card 1..5 */
    --ff-text:      'DM Sans', system-ui, sans-serif;          /* Text 2..5 */
    --ff-mono:      'JetBrains Mono', ui-monospace, monospace; /* Caption 1..2, Label */
    --ff-btn:       'Roboto', system-ui, sans-serif;           /* Button — уже в теме */

    /* ──────── ТИПОГРАФИЯ Figma pre-sets (fixed px, как в variables) ────────
       Имена ровно как в Figma. Каждая секция выбирает нужный pre-set —
       мобайл/десктоп использует РАЗНЫЕ pre-sets (это design intent),
       а не один и тот же со скейлом. Где всё-таки нужен scale (s02
       desktop H2 → s02 mobile H5) — переключаем pre-set, а не клампим. */

    /* Headlines */
    --fs-h1:        96px;  --lh-h1:  92px;  --ls-h1:  -3px;   /* Headline 1 */
    --fs-h2:        64px;  --lh-h2:  67px;  --ls-h2:  -2px;   /* Headline 2 */
    --fs-h3:        52px;  --lh-h3:  54px;  --ls-h3:  -2px;   /* Headline 3 */
    --fs-h4:        34px;  --lh-h4:  40px;  --ls-h4:  -1px;   /* Headline 4 */
    --fs-h5:        27px;  --lh-h5:  32px;  --ls-h5:   0;     /* Headline 5 */

    /* Headline-card (Syne bold/extrabold) */
    --fs-hc1:       24px;  --lh-hc1: 40px;  --ls-hc1:  0;     /* Headline card 1 (Bold) */
    --fs-hc2:       18px;  --lh-hc2: 21px;  --ls-hc2:  2px;   /* Headline card 2 (ExtraBold) */
    --fs-hc3:       13px;  --lh-hc3: 21px;  --ls-hc3:  2px;   /* Headline card 3 (ExtraBold) */
    --fs-hc4:       18px;  --lh-hc4: 24px;  --ls-hc4:  -1px;  /* Headline card 4 (Bold) */
    --fs-hc5:       13px;  --lh-hc5: 18px;  --ls-hc5:  2px;   /* Headline card 5 (Bold) */

    /* Body text (DM Sans regular) */
    --fs-t2:        18px;  --lh-t2:  26px;                    /* Text 2 */
    --fs-t3:        16px;  --lh-t3:  22px;                    /* Text 3 */
    --fs-t4:        12px;  --lh-t4:  19px;                    /* Text 4 */
    --fs-t5:        10px;  --lh-t5:  14px;                    /* Text 5 */

    /* Mono (JetBrains Mono) */
    --fs-cap1:      12px;  --lh-cap1: 16px; --ls-cap1: 1px;   /* Caption 1 */
    --fs-cap2:      10px;  --lh-cap2: 16px; --ls-cap2: 1px;   /* Caption 2 */
    --fs-label:     10px;  --lh-label: 16px; --ls-label: 2px; /* Label (uppercase) */

    /* Tag (Syne Bold) + Button (Roboto Bold) */
    --fs-tag:       11px;  --lh-tag: 14px;  --ls-tag: 1px;
    --fs-btn:       16px;  --lh-btn: 22px;

    /* ──────── РАДИУСЫ ──────── */

    --r-sm:         6px;
    --r-md:         12px;
    --r-lg:         20px;
    --r-pill:       100px;

    /* ──────── BORDER / DIVIDER ──────── */

    --bd-w:         1px;
    --bd-c:         var(--c-bg-card);       /* #1A2236 — основной разделитель между секциями */
    --bd-c-aqua:    var(--c-bg-aqua-grey);  /* #073754 — outline для CTA, footlines */
    --bd-c-red:     var(--c-red-dd);        /* #59231F — рамка red-cards */

    /* ──────── DROP-SHADOWS / GLOW ──────── */

    --glow-blue:    drop-shadow(0 0 9px rgba(0, 170, 255, 0.28));
    --glow-blue-h:  drop-shadow(0 0 12px rgba(0, 170, 255, 0.45));
}