/* ============================================================
   Sweet — Typography tokens
   Primary: Rubik (Regular 400 / Medium 500). Headings may use 600/700
   for strong emphasis, mirroring the guideline "Main heading" weight mix.
   System: Arial (Bold / Regular).
   Line heights: headings 110%, body 120%, descriptions 100%.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-primary: 'Rubik', 'Helvetica Neue', Arial, sans-serif;
  --font-system:  Arial, 'Helvetica Neue', sans-serif;

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

  /* ---- Line heights ---- */
  --lh-tight:  1.0;   /* @kind font */  /* descriptions, numerals */
  --lh-heading:1.1;   /* @kind font */  /* headings & subheadings */
  --lh-body:   1.2;   /* @kind font */  /* paragraphs (120%) */
  --lh-relaxed:1.45;  /* @kind font */  /* long-form reading */

  /* ---- Tracking ---- */
  --tracking-tight:  -0.02em;  /* large display     @kind font */
  --tracking-normal: 0;        /* @kind font */
  --tracking-wide:   0.04em;   /* eyebrows          @kind font */

  /* ---- Type scale (fluid-ready px values) ---- */
  --text-display:  72px;  /* hero display                  */
  --text-h1:       52px;
  --text-h2:       38px;
  --text-h3:       28px;
  --text-title:    22px;
  --text-body-lg:  18px;
  --text-body:     16px;
  --text-small:    14px;
  --text-caption:  12px;
  --text-overline: 12px;
}

/* ---- Optional helper classes (foundation specimens / quick prototypes) ---- */
.sw-display  { font-family: var(--font-primary); font-weight: var(--weight-regular); font-size: var(--text-display); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.sw-h1       { font-family: var(--font-primary); font-weight: var(--weight-medium);  font-size: var(--text-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-tight); color: var(--text-primary); }
.sw-h2       { font-family: var(--font-primary); font-weight: var(--weight-medium);  font-size: var(--text-h2); line-height: var(--lh-heading); color: var(--text-primary); }
.sw-h3       { font-family: var(--font-primary); font-weight: var(--weight-medium);  font-size: var(--text-h3); line-height: var(--lh-heading); color: var(--text-primary); }
.sw-title    { font-family: var(--font-primary); font-weight: var(--weight-medium);  font-size: var(--text-title); line-height: var(--lh-body); color: var(--text-primary); }
.sw-body     { font-family: var(--font-primary); font-weight: var(--weight-regular); font-size: var(--text-body); line-height: var(--lh-body); color: var(--text-primary); }
.sw-small    { font-family: var(--font-primary); font-weight: var(--weight-regular); font-size: var(--text-small); line-height: var(--lh-body); color: var(--text-secondary); }
.sw-overline { font-family: var(--font-primary); font-weight: var(--weight-medium);  font-size: var(--text-overline); line-height: var(--lh-tight); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-secondary); }