/* ============================================================
   TYPOGRAPHY — DesignCode UI "Astrolog"
   ------------------------------------------------------------
   Single family (Inter) across the whole system. Headings are
   600 (Semibold) with tight tracking; body is 400/500. A Mono
   ramp (Roboto Mono) covers code & numeric specimens.
   Sizes mirror the Figma "Typography" frame exactly.
   ============================================================ */

:root {
  /* Families */
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", "SF Mono", ui-monospace, "JetBrains Mono",
    "Menlo", monospace;

  /* Weights */
  --weight-thin: 100;
  --weight-extralight: 200;
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ---- Type scale (font-size) ---- */
  --text-h1: 60px;   /* Heading 1 — Semibold */
  --text-h2: 50px;   /* Heading 2 — Semibold */
  --text-h3: 40px;   /* Heading 3 — Semibold */
  --text-h4: 30px;   /* Heading 4 — Semibold */
  --text-h5: 24px;   /* Heading 5 — Semibold */
  --text-headline: 20px;     /* Headline — Regular / Medium */
  --text-body-large: 18px;   /* Body Large — Regular / Medium */
  --text-body: 16px;         /* Body — Regular / Medium */
  --text-footnote: 14px;     /* Footnote — Regular / Medium */
  --text-caption: 13px;      /* Caption — Regular / Medium */
  --text-small: 12px;        /* Small — Regular / Medium */

  /* Mobile heading overrides */
  --text-mobile-h1: 40px;
  --text-mobile-h2: 30px;
  --text-mobile-h3: 28px;
  --text-mobile-h4: 24px;

  /* ---- Line heights ---- */
  --leading-tight: 100%;     /* headings */
  --leading-snug: 1.2;
  --leading-normal: 1.5;     /* body — 20px on 13px caption, etc. */
  --leading-relaxed: 1.6;

  /* ---- Letter spacing ---- */
  --tracking-tight: -0.02em; /* large headings */
  --tracking-snug: -0.01em;
  --tracking-normal: 0;
}

/* ------------------------------------------------------------
   Optional utility classes — apply a named style in one shot.
   Components mostly set size/weight directly via the vars above.
   ------------------------------------------------------------ */
.ds-h1 { font: var(--weight-semibold) var(--text-h1) / var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); }
.ds-h2 { font: var(--weight-semibold) var(--text-h2) / var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); }
.ds-h3 { font: var(--weight-semibold) var(--text-h3) / var(--leading-tight) var(--font-sans); letter-spacing: var(--tracking-tight); }
.ds-h4 { font: var(--weight-semibold) var(--text-h4) / 1.1 var(--font-sans); letter-spacing: var(--tracking-snug); }
.ds-h5 { font: var(--weight-semibold) var(--text-h5) / 1.2 var(--font-sans); letter-spacing: var(--tracking-snug); }
.ds-headline { font: var(--weight-medium) var(--text-headline) / 1.4 var(--font-sans); }
.ds-body-lg { font: var(--weight-regular) var(--text-body-large) / 1.5 var(--font-sans); }
.ds-body { font: var(--weight-regular) var(--text-body) / 1.5 var(--font-sans); }
.ds-footnote { font: var(--weight-regular) var(--text-footnote) / 1.45 var(--font-sans); }
.ds-caption { font: var(--weight-regular) var(--text-caption) / 1.54 var(--font-sans); }
.ds-small { font: var(--weight-regular) var(--text-small) / 1.4 var(--font-sans); }
.ds-mono { font-family: var(--font-mono); }