/* ============================================================
   SalonFlow — Typography
   Brand typefaces (self-hosted): Creato Display for English/Latin,
   STC for Arabic. Creato carries everything — body, UI, the wordmark,
   KPI numbers and visit numbers (heavier weights for display). SF Mono
   for codes (staff code field).
   ============================================================ */

:root {
  /* ---- Families (self-hosted brand typefaces) ---- */
  /* English / Latin — Creato Display, the brand sans (Thin→Black) */
  --font-sans: "Creato Display", -apple-system, BlinkMacSystemFont,
               "Segoe UI", system-ui, sans-serif;
  /* Display / wordmark / numerals — also Creato Display (heavier weights) */
  --font-rounded: "Creato Display", -apple-system, system-ui, sans-serif;
  /* Arabic — STC, falling back to Creato for any Latin in the run */
  --font-arabic: "STC", "Creato Display", -apple-system, system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "SFMono-Regular", "Menlo", monospace;
  /* Alias kept for back-compat — points at the Arabic brand face */
  --font-stc: var(--font-arabic);

  /* ---- Weights (SwiftUI Font.Weight) ---- */
  --w-regular:  400; /* @kind other */
  --w-medium:   500; /* @kind other */
  --w-semibold: 600; /* @kind other */
  --w-bold:     700; /* @kind other */
  --w-black:    800; /* @kind other */

  /* ---- Type scale (SwiftUI text styles → px on iPad) ---- */
  --t-hero:        128px;  /* live-display visit number (.black rounded) */
  --t-largetitle:  34px;   /* page titles / login wordmark (.bold) */
  --t-title1:      28px;   /* metric values (.bold rounded) */
  --t-title2:      22px;   /* mini-stat values */
  --t-title3:      20px;   /* section labels (.bold) */
  --t-headline:    17px;   /* card titles / button labels (.semibold) */
  --t-body:        17px;   /* body copy */
  --t-subheadline: 15px;   /* secondary copy / field text */
  --t-footnote:    13px;   /* labels under stats */
  --t-caption:     12px;   /* chips, badges, meta */
  --t-caption2:    11px;   /* finest meta / tracked eyebrows */

  /* ---- Line heights ---- */
  --lh-tight:  1.05; /* @kind other */
  --lh-snug:   1.2; /* @kind other */
  --lh-normal: 1.35; /* @kind other */
  --lh-relaxed: 1.5; /* @kind other */

  /* ---- Tracking (SwiftUI .tracking on eyebrows / live display) ---- */
  --tracking-eyebrow: 1.2px;  /* "UP NEXT" */
  --tracking-label:   2px;    /* "LIVE", "LIVE PREVIEW" */
  --tracking-display: 5px;    /* "VISIT", "NOW SERVING" */
}

/* ---- Convenience text-style classes ---- */
.sf-largetitle { font-family: var(--font-sans); font-size: var(--t-largetitle); font-weight: var(--w-bold); line-height: var(--lh-snug); letter-spacing: -0.4px; }
.sf-title3     { font-family: var(--font-sans); font-size: var(--t-title3);     font-weight: var(--w-bold); }
.sf-headline   { font-family: var(--font-sans); font-size: var(--t-headline);   font-weight: var(--w-semibold); }
.sf-body       { font-family: var(--font-sans); font-size: var(--t-body);       font-weight: var(--w-regular); line-height: var(--lh-relaxed); }
.sf-subheadline { font-family: var(--font-sans); font-size: var(--t-subheadline); font-weight: var(--w-regular); }
.sf-caption    { font-family: var(--font-sans); font-size: var(--t-caption);    font-weight: var(--w-regular); }
/* Rounded numerics — metrics, visit numbers, wordmark */
.sf-metric     { font-family: var(--font-rounded); font-weight: var(--w-bold); font-size: var(--t-title1); line-height: var(--lh-tight); }
.sf-wordmark   { font-family: var(--font-rounded); font-weight: var(--w-bold); }