/* ============================================================
   Starbucks Brand — Typography
   Display  → Starbucks Display (loud, proud brand moments)
   Headline → Starbucks Serif   (warmth, craft, storytelling)
   Text/UI  → SoDo Sans         (functional clarity at any size)
   Marker   → Barista Marker    (short handwritten phrases)
   ============================================================ */

:root {
  /* Families */
  --font-display: "Starbucks Display", "Arial Black", system-ui, sans-serif;
  --font-serif: "Starbucks Serif", Georgia, "Times New Roman", serif;
  --font-sans: "SoDo Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-marker: "Barista Marker", "Bradley Hand", "Comic Sans MS", cursive;
  --font-legacy-text: "Pike", Georgia, serif;
  --font-legacy-display: "Lander", "Arial Black", sans-serif;

  /* Weights */
  --fw-light: 300;      /* @kind font */
  --fw-regular: 400;    /* @kind font */
  --fw-semibold: 600;   /* @kind font */
  --fw-bold: 700;       /* @kind font */
  --fw-black: 900;      /* @kind font */

  /* Type scale (rem, 16px root) — generous, brand-forward */
  --fs-display-2xl: 6rem;     /* 96px — hero brand statements */
  --fs-display-xl: 4.5rem;    /* 72px */
  --fs-display-lg: 3.5rem;    /* 56px */
  --fs-display-md: 2.75rem;   /* 44px */
  --fs-heading-xl: 2.25rem;   /* 36px */
  --fs-heading-lg: 1.75rem;   /* 28px */
  --fs-heading-md: 1.375rem;  /* 22px */
  --fs-heading-sm: 1.125rem;  /* 18px */
  --fs-body-lg: 1.125rem;     /* 18px */
  --fs-body-md: 1rem;         /* 16px */
  --fs-body-sm: 0.875rem;     /* 14px */
  --fs-caption: 0.75rem;      /* 12px */
  --fs-overline: 0.6875rem;   /* 11px */

  /* Line heights */
  --lh-tight: 0.98;     /* @kind other */
  --lh-display: 1.04;   /* @kind other */
  --lh-heading: 1.14;   /* @kind other */
  --lh-snug: 1.3;       /* @kind other */
  --lh-body: 1.55;      /* @kind other */

  /* Letter spacing */
  --ls-display: -0.01em;   /* @kind other */
  --ls-tight: -0.02em;     /* @kind other */
  --ls-normal: 0;          /* @kind other */
  --ls-wide: 0.04em;       /* @kind other */
  --ls-overline: 0.16em;   /* @kind other */
}