/* ==========================================================================
   un-do DESIGN — Typography tokens

   Typographic discipline modelled on the quiet, Conran-monitored Japanese spa
   idiom (ref: AQUAIGNIS GARDEN SPA). The defining rules:
     1. LIGHT weights — headings sit at 300; nothing heavier than 500 in display.
     2. GENEROUS tracking — Japanese display & body carry positive letter-spacing;
        English labels are uppercase and very widely tracked (~0.3em).
     3. TALL line-height — Japanese body breathes at ~1.9; multi-line headings ~1.5.
     4. RESTRAINED scale — display sizes stay measured, never oversized.
     5. EYEBROW pairing — a small, wide-tracked English label above a JP heading.

   Headings: Cormorant Garamond (Latin) + Noto Serif JP (Japanese mincho).
   Body & UI: Noto Sans (Latin) + Noto Sans JP (gothic).
   Responsive: base values are mobile; the lg breakpoint scales the ramp up.
   ========================================================================== */

:root {
  /* ---- Families ---- */
  --font-heading: "Cormorant Garamond", "Noto Serif JP", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-body: "Noto Sans", "Noto Sans JP", system-ui, sans-serif;
  /* Japanese headings render in Noto Serif JP (mincho); Latin display in
     Cormorant Garamond. Body & UI use Noto Sans / Noto Sans JP (gothic). */

  /* ---- Weights — kept light & quiet; display is 300, never bold ---- */
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heading: var(--font-weight-light); /* 300 — the brand display weight */
  --font-weight-label: var(--font-weight-medium);  /* 500 — eyebrows & UI labels */

  /* ---- Type ramp — mobile defaults (restrained) ---- */
  --text-h1: 2.5rem;       /* 40px */
  --text-h2: 2rem;         /* 32px */
  --text-h3: 1.625rem;     /* 26px */
  --text-h4: 1.375rem;     /* 22px */
  --text-h5: 1.25rem;      /* 20px */
  --text-h6: 1.125rem;     /* 18px */
  --text-large: 1.125rem;  /* 18px */
  --text-medium: 1rem;     /* 16px */
  --text-regular: 0.9375rem; /* 15px */
  --text-small: 0.8125rem; /* 13px */
  --text-tiny: 0.6875rem;  /* 11px */

  /* ---- Line heights — airy, for Japanese setting ---- */
  --leading-tight: 1.25;   /* large single-line display */
  --leading-heading: 1.5;  /* multi-line poetic headings */
  --leading-snug: 1.4;
  --leading-normal: 1.7;
  --leading-body: 1.9;     /* Japanese body — breathes */
  --leading-relaxed: 2.1;

  /* ---- Letter spacing — generous, the signature of the idiom ---- */
  --tracking-tight: 0.01em;
  --tracking-heading: 0.06em;  /* JP display — calm, opened-up */
  --tracking-body: 0.04em;     /* JP body */
  --tracking-wide: 0.12em;
  --tracking-label: 0.2em;     /* UI labels, nav */
  --tracking-eyebrow: 0.3em;   /* uppercase English eyebrow labels */
}

/* ---- Desktop ramp — measured, not oversized ---- */
@media (min-width: 992px) {
  :root {
    --text-h1: 4rem;         /* 64px */
    --text-h2: 3rem;         /* 48px */
    --text-h3: 2.25rem;      /* 36px */
    --text-h4: 1.75rem;      /* 28px */
    --text-h5: 1.5rem;       /* 24px */
    --text-h6: 1.25rem;      /* 20px */
    --text-large: 1.375rem;  /* 22px */
    --text-medium: 1.0625rem; /* 17px */
    --text-regular: 1rem;    /* 16px */
    --text-small: 0.8125rem; /* 13px */
    --text-tiny: 0.75rem;    /* 12px */
  }
}