/* ═══════════════════════════════════════════════════════════
   FinancialDS — Typography Tokens
   Content styles: Display / Heading / Body / Label (L0–L3)

   Viewport adaptation:
   · Desktop (≥1024px) — default :root, Display clamp(Tablet→Desktop)
   · Mobile (<640px)   — @media override: Display, H1–H6, Body, Caption
   · Tablet (640–1023px) — clamp() в Desktop автоматически даёт Tablet-значения Display;
     Heading/Body на Tablet = Desktop, отдельный @media не нужен
   · B2B ([data-density="compact"]) — компактный масштаб H1–H6 + Body lh
   ═══════════════════════════════════════════════════════════ */

:root {

  /* ── Display ──────────────────────────────────────────────
     clamp(Tablet-val, vw, Desktop-val): при ≤1024px = Tablet, ≥1440px = Desktop.
     Mobile переопределяется в @media (max-width: 639px).           */
  --ds-type-display-0-size:     clamp(64px, 5.56vw, 80px); /* Mobile=56 Tablet=64 Desktop=80 */
  --ds-type-display-0-weight:   600;
  --ds-type-display-0-lh:       1.1;
  --ds-type-display-0-tracking: -0.03em;

  --ds-type-display-1-size:     clamp(48px, 3.89vw, 56px); /* Mobile=44 Tablet=48 Desktop=56 */
  --ds-type-display-1-weight:   600;
  --ds-type-display-1-lh:       1.14;
  --ds-type-display-1-tracking: -0.025em;

  /* ── Headings ─────────────────────────────────────────────
     Desktop = Tablet. Mobile переопределяется ниже.               */
  --ds-type-h1-size:     40px;
  --ds-type-h1-weight:   600;
  --ds-type-h1-lh:       1.2;
  --ds-type-h1-tracking: -0.02em;

  --ds-type-h2-size:     36px;
  --ds-type-h2-weight:   600;
  --ds-type-h2-lh:       1.22;
  --ds-type-h2-tracking: -0.018em;

  --ds-type-h3-size:     32px;
  --ds-type-h3-weight:   600;
  --ds-type-h3-lh:       1.25;
  --ds-type-h3-tracking: -0.012em;

  --ds-type-h4-size:     28px;
  --ds-type-h4-weight:   600;
  --ds-type-h4-lh:       1.29;
  --ds-type-h4-tracking: -0.008em;

  --ds-type-h5-size:     24px;
  --ds-type-h5-weight:   600;
  --ds-type-h5-lh:       1.33;
  --ds-type-h5-tracking: -0.005em;

  --ds-type-h6-size:     20px;
  --ds-type-h6-weight:   600;
  --ds-type-h6-lh:       1.4;
  --ds-type-h6-tracking: 0;

  /* ── Subtitle ─────────────────────────────────────────────
     Figma ✦ Typography/Subtitle/Sub2 (Plugin API): 18/24 Medium 500;
     Mobile 16/24. Notification title binds this style.               */
  --ds-type-sub2-size:   18px;
  --ds-type-sub2-weight: 500;
  --ds-type-sub2-lh:     1.333;  /* 24px */

  /* ── Font weights (numeric scale) ─────────────────────────
     Were referenced (--ds-fw-sb/md in notification.css) but never
     defined → font-weight var() fell back to browser default 400.    */
  --ds-fw-rg: 400;
  --ds-fw-md: 500;
  --ds-fw-sb: 600;

  /* ── Body ─────────────────────────────────────────────────
     Desktop = Tablet. Mobile переопределяется ниже.
     Body-*c — компактный вариант (B2B таблицы).                   */
  --ds-type-body-1-size:    16px;
  --ds-type-body-1-weight:  400;
  --ds-type-body-1-lh:      1.5;    /* 24px */

  --ds-type-body-1c-size:   16px;
  --ds-type-body-1c-weight: 400;
  --ds-type-body-1c-lh:     1.25;   /* 20px */

  --ds-type-body-2-size:    14px;
  --ds-type-body-2-weight:  400;
  --ds-type-body-2-lh:      1.43;   /* 20px */

  --ds-type-body-2c-size:   14px;
  --ds-type-body-2c-weight: 400;
  --ds-type-body-2c-lh:     1.14;   /* 16px */

  --ds-type-caption-size:   12px;
  --ds-type-caption-weight: 400;
  --ds-type-caption-lh:     1.33;   /* 16px */

  /* ── Label tokens L0–L3 ───────────────────────────────────
     Medium 500. Used exclusively inside UI components.
     Компонентные связи — не трогать.                              */

  /* L0 · XL Button, hero CTA */
  --ds-type-label-l0-size:    18px;
  --ds-type-label-l0-weight:  500;
  --ds-type-label-l0-lh:      24px;

  /* L1 · LG Button */
  --ds-type-label-l1-size:    16px;
  --ds-type-label-l1-weight:  500;
  --ds-type-label-l1-lh:      24px;   /* Default */
  --ds-type-label-l1c-lh:     20px;   /* Compact */

  /* L2 · MD/SM Button, default UI */
  --ds-type-label-l2-size:    14px;
  --ds-type-label-l2-weight:  500;
  --ds-type-label-l2-lh:      20px;   /* Default */
  --ds-type-label-l2c-lh:     16px;   /* Compact */

  /* L3 · Badge, Tag, dense chip */
  --ds-type-label-l3-size:    12px;
  --ds-type-label-l3-weight:  500;
  --ds-type-label-l3-lh:      16px;   /* Default */
  --ds-type-label-l3c-lh:     14px;   /* Compact */
  --ds-type-label-l3-tracking: 0.04em;

  /* ── Specimen / utility ───────────────────────────────────*/
  --ds-type-specimen-hero-size:     clamp(22px, 3vw, 34px);
  --ds-type-specimen-hero-weight:   600;
  --ds-type-specimen-hero-lh:       1.2;
  --ds-type-specimen-hero-tracking: -0.02em;

  --ds-type-specimen-body-size:   16px;
  --ds-type-specimen-body-weight: 400;
  --ds-type-specimen-body-lh:     1.6;

  --ds-type-specimen-tnum-size:     22px;
  --ds-type-specimen-tnum-weight:   600;
  --ds-type-specimen-tnum-lh:       1.5;
  --ds-type-specimen-tnum-tracking: -0.01em;

  /* Sub-label used for meta hints inside cards (11px) */
  --ds-type-meta-size:     11px;
  --ds-type-meta-weight:   600;
  --ds-type-meta-lh:       1;
  --ds-type-meta-tracking: 0.1em;

}

/* ── Mobile (<640px) ──────────────────────────────────────────
   Display, H1–H6, Body, Caption меньше.
   Label — не переопределяется.                                    */
@media (max-width: 639px) {
  :root {
    --ds-type-display-0-size:     56px;
    --ds-type-display-0-lh:       1.14; /* 64/56 */

    --ds-type-display-1-size:     44px;
    --ds-type-display-1-lh:       1.09; /* 48/44 */

    --ds-type-h1-size:     36px;
    --ds-type-h1-lh:       1.22; /* 44/36 */

    --ds-type-h2-size:     32px;
    --ds-type-h2-lh:       1.25; /* 40/32 */

    --ds-type-h3-size:     28px;
    --ds-type-h3-lh:       1.29; /* 36/28 */

    --ds-type-h4-size:     24px;
    --ds-type-h4-lh:       1.33; /* 32/24 */

    --ds-type-h5-size:     20px;
    --ds-type-h5-lh:       1.4;  /* 28/20 */

    --ds-type-h6-size:     16px;
    --ds-type-h6-lh:       1.5;  /* 24/16 */

    --ds-type-sub2-size:   16px;  /* Figma Sub2 Mobile = 16 */
    --ds-type-sub2-lh:     1.5;   /* 24/16 */

    --ds-type-body-1-size:    14px;
    --ds-type-body-1-lh:      1.43; /* 20/14 */

    --ds-type-body-1c-size:   14px;
    --ds-type-body-1c-lh:     1.14; /* 16/14 */

    --ds-type-body-2-size:    12px;
    --ds-type-body-2-lh:      1.33; /* 16/12 */

    --ds-type-body-2c-size:   12px;
    --ds-type-body-2c-lh:     1.17; /* 14/12 */

    --ds-type-caption-size:   12px;
    --ds-type-caption-lh:     1.17; /* 14/12 */
  }
}

/* ── B2B / Compact density ────────────────────────────────────
   Desktop(B2B) из Figma: компактный масштаб H1–H6.
   Body lh переключается на компактный вариант.                    */
[data-density="compact"] {
  --ds-type-h1-size:   28px;
  --ds-type-h1-lh:     1.14; /* 32/28 */

  --ds-type-h2-size:   24px;
  --ds-type-h2-lh:     1.33; /* 32/24 */

  --ds-type-h3-size:   20px;
  --ds-type-h3-lh:     1.4;  /* 28/20 */

  --ds-type-h4-size:   18px;
  --ds-type-h4-lh:     1.33; /* 24/18 */

  --ds-type-h5-size:   16px;
  --ds-type-h5-lh:     1.5;  /* 24/16 */

  --ds-type-h6-size:   14px;
  --ds-type-h6-lh:     1.29; /* 18/14 */

  --ds-type-body-1-lh:  1.25; /* 20px */
  --ds-type-body-2-lh:  1.14; /* 16px */
}