/* ============================================================
   SILIANA'S MUSIC STUDIO — TYPOGRAPHY TOKENS
   Two families do all the work:
     • Cormorant Garamond — an elegant, high-contrast serif used
       for display, headings, pull-quotes and anything in italic.
     • DM Sans — a humanist sans used for body, UI, kickers, labels.
   Both are Google Fonts; the website loads them from there too,
   so no substitution is needed.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Families ---- */
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Roles */
  --font-display: var(--font-serif); /* big headlines, hero        */
  --font-heading: var(--font-serif); /* section titles, card h3    */
  --font-quote:   var(--font-serif); /* italic pull-quotes         */
  --font-body:    var(--font-sans);  /* paragraphs                 */
  --font-ui:      var(--font-sans);  /* buttons, labels, nav, form */

  /* ---- Type scale (fluid where it helps) ---- */
  --text-display:  clamp(2.5rem, 6vw, 4.5rem);   /* hero H1        */
  --text-h1:       clamp(2rem, 4.5vw, 3rem);     /* section H2     */
  --text-h2:       clamp(1.5rem, 3vw, 2rem);
  --text-h3:       clamp(1.25rem, 2.5vw, 1.6rem);/* card titles    */
  --text-lead:     1.25rem;   /* 20px — intro paragraphs           */
  --text-lg:       1.0625rem; /* 17px — body large                 */
  --text-base:     1rem;      /* 16px — body                       */
  --text-sm:       0.875rem;  /* 14px — small / form               */
  --text-xs:       0.75rem;   /* 12px — kicker / label             */
  --text-2xs:      0.6875rem; /* 11px — section tag / overline     */

  /* ---- Weights ---- */
  --weight-light:   300;
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;

  /* ---- Line heights ---- */
  --leading-tight:  1.15; /* display & headings   */
  --leading-snug:   1.4;  /* sub-heads, quotes    */
  --leading-normal: 1.6;  /* body                 */
  --leading-relaxed:1.75; /* long-form reading    */

  /* ---- Letter spacing ---- */
  --tracking-display: -0.5px; /* tighten large serif        */
  --tracking-normal:  0;
  --tracking-wide:    0.4px;  /* UI / buttons               */
  --tracking-kicker:  2.5px;  /* uppercase kicker           */
  --tracking-tag:     3px;    /* uppercase section tag       */
  --tracking-label:   2px;    /* uppercase small labels      */
}