/* ==========================================================================
   KISS Dental — Typography tokens
   Two families, one weight each. ABC Otto carries every editorial moment
   (hero lines, oversized numerals, section titles); FT Regola Neue does the
   structural work (nav, labels, body, captions). Sizes mirror the Figma
   frames, rounded to clean values.
   ========================================================================== */

:root {
  /* ---- Families ------------------------------------------------------- */
  --font-display: "ABC Otto", "Times New Roman", Georgia, serif;
  --font-sans:    "FT Regola Neue", -apple-system, BlinkMacSystemFont,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- Weight (the brand ships a single Regular cut of each) ----------- */
  --weight-regular: 400;

  /* ---- Type scale (px) ------------------------------------------------- */
  --fs-numeral:   319px;   /* the giant ABC Otto section numbers 1–5      */
  --fs-display:   70px;    /* hero — "Uśmiech w naturalnej harmonii."     */
  --fs-headline:  50px;    /* big statements — "Funkcja. Estetyka."       */
  --fs-title:     33px;    /* section / lede headline                     */
  --fs-lede:      21px;    /* intro paragraph, large body                 */
  --fs-body:      19px;    /* default running copy                        */
  --fs-ui:        16px;    /* nav, buttons, labels, list rows             */
  --fs-caption:   15px;    /* captions, footnotes, meta                   */

  /* ---- Line heights --------------------------------------------------- */
  --lh-tight:   0.98;      /* @kind font */  /* display headlines & numerals */
  --lh-snug:    1.1;       /* @kind font */  /* titles */
  --lh-body:    1.45;      /* @kind font */  /* paragraphs */
  --lh-ui:      1.35;      /* @kind font */  /* labels & rows */

  /* ---- Letter spacing ------------------------------------------------- */
  --ls-display: -0.02em;   /* hero & headlines tuck in slightly           */
  --ls-normal:  0em;
  --ls-label:   0.04em;    /* uppercase eyebrows / small labels           */

  /* ======================================================================
     SEMANTIC TEXT ROLES — composite shorthands.
     Use:  font: var(--text-display);  (family-less; pair with var(--font-*))
     Each role pairs a family + size + line-height below as discrete vars.
     ====================================================================== */

  /* Display (ABC Otto) */
  --type-hero-family:   var(--font-display);
  --type-hero-size:     var(--fs-display);
  --type-hero-lh:       var(--lh-tight);
  --type-hero-ls:       var(--ls-display);

  --type-headline-family: var(--font-display);
  --type-headline-size:   var(--fs-headline);
  --type-headline-lh:     var(--lh-tight);

  --type-title-family:  var(--font-display);
  --type-title-size:    var(--fs-title);
  --type-title-lh:      var(--lh-snug);

  /* Body (FT Regola Neue) */
  --type-lede-family:   var(--font-sans);
  --type-lede-size:     var(--fs-lede);
  --type-lede-lh:       var(--lh-body);

  --type-body-family:   var(--font-sans);
  --type-body-size:     var(--fs-body);
  --type-body-lh:       var(--lh-body);

  --type-ui-family:     var(--font-sans);
  --type-ui-size:       var(--fs-ui);
  --type-ui-lh:         var(--lh-ui);
}