/* =====================================================
   Design System · Typography tokens (Inter)
   Values pulled via Figma Dev Mode MCP → get_variable_defs
   Scope: project-ampm-test2.php
   ===================================================== */

:root {
  /* ---- Font families ---- */
  --ff-body:    'Inter-Regular', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-display: 'Inter-Regular', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ff-mono:    ui-monospace, Menlo, Consolas, monospace;

  /* ---- Font sizes (px) ---- */
  --fs-text-2xs:    10px;  /* project extension — chips / WCAG meta */
  --fs-text-xs:     12px;
  --fs-text-sm:     14px;
  --fs-text-md:     16px;
  --fs-text-lg:     24px;
  --fs-text-xl:     20px;
  --fs-display-xs:  24px;
  --fs-display-sm:  30px;
  --fs-display-md:  36px;
  --fs-display-lg:  48px;
  --fs-display-xl:  60px;
  --fs-display-2xl: 72px;

  /* ---- Line heights (px) ---- */
  --lh-text-2xs:    14px;
  --lh-text-xs:     18px;
  --lh-text-sm:     20px;
  --lh-text-md:     24px;
  --lh-text-lg:     28px;
  --lh-text-xl:     30px;
  --lh-display-xs:  32px;
  --lh-display-sm:  38px;
  --lh-display-md:  44px;
  --lh-display-lg:  60px;
  --lh-display-xl:  72px;
  --lh-display-2xl: 90px;

  /* ---- Letter spacing ---- */
  --ls-tight:  -0.02em;     /* display-md → display-2xl */
  --ls-normal: 0;
  --ls-wide:   0.06em;      /* uppercase labels */
  --ls-xwide:  0.08em;      /* small caps / meta labels */

  /* ---- Font weights ---- */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
}

/* ---- Mobile scale (≤768px): шаг вниз для display-уровней ---- */
@media (max-width: 768px) {
  :root {
    --fs-display-2xl: 48px;  --lh-display-2xl: 60px;
    --fs-display-xl:  40px;  --lh-display-xl:  50px;
    --fs-display-lg:  36px;  --lh-display-lg:  44px;
    --fs-display-md:  30px;  --lh-display-md:  38px;
    --fs-display-sm:  24px;  --lh-display-sm:  32px;
    --fs-display-xs:  22px;  --lh-display-xs:  30px;
    /* text-* размеры на мобилке не уменьшаем */
  }
}

/* =====================================================
   Utility classes · применение токенов
   ===================================================== */

.ds-text-2xs   { font-size: var(--fs-text-2xs);    line-height: var(--lh-text-2xs);    letter-spacing: var(--ls-normal); }
.ds-text-xs    { font-size: var(--fs-text-xs);     line-height: var(--lh-text-xs);     letter-spacing: var(--ls-normal); }
.ds-text-sm    { font-size: var(--fs-text-sm);     line-height: var(--lh-text-sm);     letter-spacing: var(--ls-normal); }
.ds-text-md    { font-size: var(--fs-text-md);     line-height: var(--lh-text-md);     letter-spacing: var(--ls-normal); }
.ds-text-lg    { font-size: var(--fs-text-lg);     line-height: var(--lh-text-lg);     letter-spacing: var(--ls-normal); }
.ds-text-xl    { font-size: var(--fs-text-xl);     line-height: var(--lh-text-xl);     letter-spacing: var(--ls-normal); }

.ds-display-xs  { font-size: var(--fs-display-xs);  line-height: var(--lh-display-xs);  letter-spacing: var(--ls-normal); }
.ds-display-sm  { font-size: var(--fs-display-sm);  line-height: var(--lh-display-sm);  letter-spacing: var(--ls-normal); }
.ds-display-md  { font-size: var(--fs-display-md);  line-height: var(--lh-display-md);  letter-spacing: var(--ls-tight); }
.ds-display-lg  { font-size: var(--fs-display-lg);  line-height: var(--lh-display-lg);  letter-spacing: var(--ls-tight); }
.ds-display-xl  { font-size: var(--fs-display-xl);  line-height: var(--lh-display-xl);  letter-spacing: var(--ls-tight); }
.ds-display-2xl { font-size: var(--fs-display-2xl); line-height: var(--lh-display-2xl); letter-spacing: var(--ls-tight); }

.ds-regular  { font-weight: var(--fw-regular); }
.ds-medium   { font-weight: var(--fw-medium); }
.ds-semibold { font-weight: var(--fw-semibold); }
.ds-bold     { font-weight: var(--fw-bold); }

/* ---- Label / eyebrow (всегда uppercase + wide tracking) ---- */
.ds-label {
  font-size: var(--fs-text-xs);
  line-height: var(--lh-text-xs);
  letter-spacing: var(--ls-xwide);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}