/* ============================================================
   COREVUE — TOKENS (1:1 с Figma Variables → global)
   Источник: src/imports/global.tokens.json + скриншоты Variables
   ============================================================ */
:root{
  /* ---- color (31) ---- */
  --c-white:        #ffffff;
  --c-paper:        #f5f3ee;
  --c-paper-2:      #ebe7df;
  --c-paper-3:      #e0ddd5;
  --c-navy:         #020344;
  --c-purple:       #6f2e8c;
  --c-red:          #e82426;
  --c-purple-deep:  #521e6a;
  --c-purple-soft:  #efe1f5;
  --c-purple-a10:   rgba(111,46,140,0.10);   /* purple @ 10% — translucent badge fill (Figma) */
  --c-red-deep:     #b51b1d;
  --c-red-deeper:   #8e1416;
  --c-red-soft:     #fde6e6;
  --c-red-a10:      rgba(232,36,38,0.10);   /* red @ 10% — translucent badge fill (Figma) */
  --c-red-disabled: #f6a8a9;
  --c-navy-10:      #ecedf1;
  --c-navy-20:      #d5d6df;
  --c-navy-40:      #9396b1;
  --c-navy-60:      #5a5d7e;
  --c-navy-80:      #1f2253;
  --c-navy-90:      #0e1248;
  --c-navy-a06:     rgba(2,3,68,0.06);
  --c-navy-a10:     rgba(2,3,68,0.10);
  --c-navy-a18:     rgba(2,3,68,0.18);
  --c-navy-a30:     rgba(2,3,68,0.30);
  --c-navy-a45:     rgba(2,3,68,0.45);
  --c-success:      #0bb16f;   /* was #157a52 — form Yes / positive states */
  --c-warn:         #d01231;   /* was #b75a00 — form errors / alerts */
  --c-danger:       #a8112a;
  --c-ink:          #0b0d2a;
  --c-ink-2:        #44476b;
  --c-light:        #d7d7d7;
  --c-mid:          #6b6e8a;
  --c-rule:         rgba(2,3,68,0.10);
  /* on-dark — white over dark blocks (footer, FAQ, CTA, referrers) + translucent header */
  --c-paper-a90:    rgba(245,243,238,0.90);
  --c-paper-a95:    rgba(245,243,238,0.95);
  --c-white-a04:    rgba(255,255,255,0.04);
  --c-white-a08:    rgba(255,255,255,0.08);
  --c-white-a10:    rgba(255,255,255,0.10);
  --c-white-a20:    rgba(255,255,255,0.20);
  --c-white-a40:    rgba(255,255,255,0.40);
  --c-white-a90:    rgba(255,255,255,0.90);

  /* ---- spacing (13) ---- */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  20px;
  --s-6:  24px;
  --s-7:  32px;
  --s-8:  48px;
  --s-9:  60px;
  --s-10: 64px;
  --s-11: 80px;
  --s-12: 96px;
  --s-13:120px;

  /* ---- borderRadius (6) ---- */
  --r-xs:    4px;
  --r-sm:    8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-pill: 999px;

  /* ---- fontFamilies (2) ---- */
  --ff-primary: 'Poppins', Arial, sans-serif;
  --ff-mono:    'JetBrains Mono', monospace;

  /* ---- fontWeights (3) ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;

  /* ============================================================
     TEXT STYLES (Figma → Local styles → Text styles)
     Формат: size px / line-height
     ============================================================ */
  /* FLUID type: ceiling = Figma desktop value (1:1), floor designed for 360px.
     rem-anchored (zoom/a11y safe), single slope from 360→1240px viewport.
     Only large styles scale; body/small/buttons stay fixed (best practice). */
  /* display 38→64 / 102 */
  --t-display-size: clamp(2.375rem, 1.710rem + 2.955vw, 4rem);     --t-display-line: 1.02;  --t-display-weight: var(--fw-semibold);
  /* h1 32→52 / 105 */
  --t-h1-size: clamp(2rem, 1.489rem + 2.273vw, 3.25rem);           --t-h1-line: 1.05;       --t-h1-weight: var(--fw-semibold);
  /* h2 26→36 / 110 */
  --t-h2-size: clamp(1.625rem, 1.369rem + 1.136vw, 2.25rem);       --t-h2-line: 1.10;       --t-h2-weight: var(--fw-semibold);
  /* h3 20→22 / 120 */
  --t-h3-size: clamp(1.25rem, 1.199rem + 0.227vw, 1.375rem);       --t-h3-line: 1.20;       --t-h3-weight: var(--fw-semibold);
  /* h4 18/130 (fixed) */
  --t-h4-size: 18px;        --t-h4-line: 1.30;       --t-h4-weight: var(--fw-semibold);
  /* lead 16→18 / 155 */
  --t-lead-size: clamp(1rem, 0.949rem + 0.227vw, 1.125rem);        --t-lead-line: 1.55;     --t-lead-weight: var(--fw-regular);
  /* body 16/155 */
  --t-body-size: 16px;      --t-body-line: 1.55;     --t-body-weight: var(--fw-regular);
  /* body-m 16/155 */
  --t-body-m-size: 16px;    --t-body-m-line: 1.55;   --t-body-m-weight: var(--fw-medium);
  /* small 14/150 */
  --t-small-size: 14px;     --t-small-line: 1.50;    --t-small-weight: var(--fw-regular);
  /* micro 12/140 */
  --t-micro-size: 12px;     --t-micro-line: 1.40;    --t-micro-weight: var(--fw-medium);
  /* eyebrow 12/100  uppercase */
  --t-eyebrow-size: 12px;   --t-eyebrow-line: 1.00;  --t-eyebrow-weight: var(--fw-semibold);
  /* button text styles — все line-height 100% */
  --t-s-button-b-size: 12px; --t-s-button-b-line: 1; --t-s-button-b-weight: var(--fw-semibold);
  --t-m-button-m-size: 14px; --t-m-button-m-line: 1; --t-m-button-m-weight: var(--fw-medium);
  --t-m-button-b-size: 14px; --t-m-button-b-line: 1; --t-m-button-b-weight: var(--fw-semibold);
  --t-l-button-m-size: 16px; --t-l-button-m-line: 1; --t-l-button-m-weight: var(--fw-medium);
  --t-l-button-b-size: 16px; --t-l-button-b-line: 1; --t-l-button-b-weight: var(--fw-semibold);

  /* ---- fontSize (10) ---- */
  --fs-display: 88px;
  --fs-h1:      52px;
  --fs-h2:      36px;
  --fs-h3:      22px;
  --fs-h4:      18px;
  --fs-lead:    18px;
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-eyebrow: 12px;
  --fs-micro:   12px;

  /* ---- lineHeights (10) ---- */
  --lh-display: 1.02;
  --lh-h1:      1.05;
  --lh-h2:      1.10;
  --lh-h3:      1.20;
  --lh-h4:      1.30;
  --lh-lead:    1.55;
  --lh-body:    1.55;
  --lh-small:   1.50;
  --lh-eyebrow: 1.00;
  --lh-micro:   1.40;

  /* ---- composite gradients (используются в макете, не в Variables) ---- */
  --g-brand:     linear-gradient(88deg, var(--c-navy) 0%, var(--c-purple) 49.5%, var(--c-red) 99%);
  --g-radiology: linear-gradient(88deg, var(--c-navy) 0%, var(--c-purple) 99%);
  --g-heart:     linear-gradient(88deg, var(--c-purple) 0%, var(--c-red) 49.5%);
  --g-photo:     linear-gradient(62deg, var(--c-paper-3) 16.5%, #d0ccc2 100%);

  /* ============================================================
     RESPONSIVE — semantic layer (usage tokens over the raw --s-* scale)
     Mobile-first: defined for base (≤599), redefined upward.
     Breakpoints are documented CONSTANTS (CSS vars can't be used in @media):
       sm 600px   ·   md 905px   ·   lg 1240px
     ============================================================ */
  --container-max: 1280px;     /* content cap; wider screens center + grow gutter */
  --gutter:     var(--s-5);    /* 20 — page side padding (.wrap/.inner)            */
  --section-px: var(--s-6);    /* 24 — section horizontal padding                  */
  --section-pt: var(--s-8);    /* 48 — section padding-top                         */
  --section-pb: var(--s-11);   /* 80 — section padding-bottom (phone block rhythm)  */
  --grid-gap:   var(--s-6);    /* 24 — gap for card grids (.grid + named grids)     */

  /* ---- spacing RELATIONSHIPS — FIXED at all breakpoints (structure scales, these don't).
         Use these by case, not raw --s-*. See STYLEGUIDE §3. ---- */
  --gap-icon:      var(--s-2);  /*  8 — icon ↔ text (buttons, contacts, logo)            */
  --gap-icon-link: var(--s-1);  /*  4 — icon ↔ text in .btn-link (tighter)               */
  --gap-row:       var(--s-4);  /* 16 — row of distinct items: text↔button, text↔icon    */
  --gap-eyebrow:   var(--s-2);  /*  8 — eyebrow/label → its value                        */
  --gap-text:      var(--s-6);  /* 24 — heading → description/paragraph                  */
  --gap-stack:     var(--s-3);  /* 12 — homogeneous stacked items + compact-card content */
  --gap-caption:   var(--s-1);  /*  4 — title → tiny caption/sub-label, list item → item    */
  --gap-subblock:  var(--s-6);  /* 24 — sub-block → sub-block inside one group           */
  --gap-block:     var(--s-8);  /* 48 — section heading → content block, block → block   */
  --gap-btns-l:    var(--s-4);  /* 16 — between L buttons (56)                            */
  --gap-btns-m:    var(--s-3);  /* 12 — between M buttons (48)                            */
  --gap-btns-s:    var(--s-2);  /*  8 — between S/XS buttons (40/32)                      */
  --card-pad:      var(--s-6);  /* 24 — compact card padding (doc-body, ref-card)         */
  --card-pad-lg:   var(--s-7);  /* 32 — large card padding (service, why-cell, step)      */
  /* hero rhythm uses the plain --s-* scale directly (no dedicated tokens):
     internal eyebrow↔h1↔lead↔actions = s-7 (32); intro → cards = s-8 (48) phone, s-10 (64) ≥600 */
}

/* sm — large phone / tablet portrait */
@media (min-width: 600px){
  :root{
    --gutter:     var(--s-6);  /* 24 */
    --section-px: var(--s-8);  /* 48 */
    /* --section-pb is now s-11 (80) from the base — phone & portrait tablet share it */
  }
}
/* md — tablet landscape / small laptop */
@media (min-width: 905px){
  :root{
    --section-px: var(--s-9);  /* 60 */
    --grid-gap:   var(--s-7);  /* 32 */
  }
}
/* lg — desktop (values here = original desktop layout, unchanged) */
@media (min-width: 1240px){
  :root{
    --section-px: var(--s-11); /* 80 */
    --section-pt: var(--s-9);  /* 60 */
    --section-pb: var(--s-13); /*120 */
  }
}