/* Typography — Figma collections "Basics / Typography" and "Tipografia".
   Sizes carry px units (the Figma floats are unitless). */

:root {
  /* ── Weights ───────────────────────────────────────────────── */
  --basics-typography-weight-thin: 100;
  --basics-typography-weight-extralight: 200;
  --basics-typography-weight-light: 300;
  --basics-typography-weight-book: 350;      /* HK Grotesk Pro "Book" */
  --basics-typography-weight-regular: 400;
  --basics-typography-weight-medium: 500;
  --basics-typography-weight-semibold: 600;
  --basics-typography-weight-bold: 700;
  --basics-typography-weight-extrabold: 800;
  --basics-typography-weight-black: 900;

  /* ── Letter spacing ────────────────────────────────────────── */
  --tipografia-interlletrat-tight-1: -1px;
  --tipografia-interlletrat-tight-05: -0.5px;
  --tipografia-interlletrat-0: 0px;
  --tipografia-interlletrat-wide-05: 0.5px;
  --tipografia-interlletrat-wide-1: 1px;

  /* ── Size set (Basics / Tipografia / mida) ─────────────────── */
  --tipografia-mida-11: 11px;
  --tipografia-mida-12: 12px;
  --tipografia-mida-14: 14px;
  --tipografia-mida-16: 16px;
  --tipografia-mida-18: 18px;
  --tipografia-mida-20: 20px;
  --tipografia-mida-24: 24px;
  --tipografia-mida-28: 28px;
  --tipografia-mida-32: 32px;
  --tipografia-mida-36: 36px;
  --tipografia-mida-40: 40px;
  --tipografia-mida-48: 48px;
  --tipografia-mida-56: 56px;
  --tipografia-mida-64: 64px;
  --tipografia-mida-80: 80px;

  /* ── Roles — desktop (breakpoint 1440) ─────────────────────── */
  --tipografia-h1: var(--tipografia-mida-80);
  --tipografia-h2: var(--tipografia-mida-64);
  --tipografia-h3: var(--tipografia-mida-48);
  --tipografia-h4: var(--tipografia-mida-40);
  --tipografia-h5: var(--tipografia-mida-32);
  --tipografia-h6: var(--tipografia-mida-24);
  --tipografia-title: var(--tipografia-mida-20);
  --tipografia-base: var(--tipografia-mida-18);
  --tipografia-sub-base: var(--tipografia-mida-16);
  --tipografia-detail: var(--tipografia-mida-14);
  --tipografia-miniatura: var(--tipografia-mida-12);

  /* ── Line heights (observed in the source frames) ──────────── */
  --line-height-display: 100%;  /* h1–h3, big numerals */
  --line-height-heading: 1.2;   /* h4–h6, titles, buttons, links 18px */
  --line-height-body: 1.3;      /* base / sub-base running text */
  --line-height-loose: 1.5;     /* long-form paragraphs */
}

/* ── Roles — mobile (breakpoint 375) ───────────────────────────
   Figma collection "Desktop // Mobile", Mobile mode. */
:root[data-device='mobile'] {
  --tipografia-h1: var(--tipografia-mida-56);
  --tipografia-h2: var(--tipografia-mida-40);
  --tipografia-h3: var(--tipografia-mida-36);
  --tipografia-h4: var(--tipografia-mida-32);
  --tipografia-h5: var(--tipografia-mida-24);
  --tipografia-h6: var(--tipografia-mida-20);
  --tipografia-title: var(--tipografia-mida-18);
  --tipografia-base: var(--tipografia-mida-16);
  --tipografia-sub-base: var(--tipografia-mida-14);
  --tipografia-detail: var(--tipografia-mida-12);
  --tipografia-miniatura: var(--tipografia-mida-11);
}

@media (max-width: 767px) {
  :root {
    --tipografia-h1: var(--tipografia-mida-56);
    --tipografia-h2: var(--tipografia-mida-40);
    --tipografia-h3: var(--tipografia-mida-36);
    --tipografia-h4: var(--tipografia-mida-32);
    --tipografia-h5: var(--tipografia-mida-24);
    --tipografia-h6: var(--tipografia-mida-20);
    --tipografia-title: var(--tipografia-mida-18);
    --tipografia-base: var(--tipografia-mida-16);
    --tipografia-sub-base: var(--tipografia-mida-14);
    --tipografia-detail: var(--tipografia-mida-12);
    --tipografia-miniatura: var(--tipografia-mida-11);
  }
}