/* ETLO — Typography tokens
   The system is bilingual (RTL Persian + LTR English).
   - Persian body / UI: Yekan Bakh → Vazirmatn (substitute)
   - English UI: Poppins
   - Display / numerals / spec headings: DM Sans
   Type scale reads from the Figma Typography frame (Display/Headline/Title/Body/Label). */
:root {
  /* families */
  --font-fa: "Vazirmatn", "Yekan Bakh", "DM Sans", system-ui, sans-serif;       /* Persian */
  --font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;       /* English UI */
  --font-display: "DM Sans", "Poppins", system-ui, sans-serif;                  /* display / numbers */
  --font-num: "DM Sans", "Poppins", sans-serif;                                 /* tabular numerals */

  /* weights */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700; /* @kind font */

  /* sizes (px) */
  --fs-display-lg: 36px;
  --fs-display:    32px;
  --fs-headline-1: 28px;
  --fs-headline-2: 24px;
  --fs-headline-3: 20px;
  --fs-headline-4: 18px;
  --fs-headline-5: 16px;  /* buttons / titles */
  --fs-body:       14px;
  --fs-body-sm:    12px;
  --fs-caption:    10px;
  --fs-micro:      8px;

  /* line heights */
  --lh-tight: 1.2; /* @kind font */
  --lh-snug: 1.35; /* @kind font */
  --lh-normal: 1.5; /* @kind font */

  /* letter spacing (optical, from spec) */
  --ls-display: -1px;
  --ls-headline: -0.4px;
  --ls-title: -0.356px;
  --ls-body: -0.3px;
  --ls-none: 0; /* @kind font */
}

/* Type helper classes — apply directly or copy the declarations. */
.etlo-display-lg { font-family: var(--font-display); font-weight: var(--fw-bold);   font-size: var(--fs-display-lg); line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.etlo-display    { font-family: var(--font-display); font-weight: var(--fw-bold);   font-size: var(--fs-display);    line-height: var(--lh-tight); letter-spacing: var(--ls-display); }
.etlo-h1 { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-headline-1); line-height: var(--lh-snug); letter-spacing: var(--ls-headline); }
.etlo-h2 { font-family: var(--font-ui); font-weight: var(--fw-semibold); font-size: var(--fs-headline-2); line-height: var(--lh-snug); letter-spacing: var(--ls-headline); }
.etlo-h3 { font-family: var(--font-ui); font-weight: var(--fw-medium);   font-size: var(--fs-headline-3); line-height: var(--lh-snug); letter-spacing: var(--ls-title); }
.etlo-h4 { font-family: var(--font-ui); font-weight: var(--fw-medium);   font-size: var(--fs-headline-4); line-height: var(--lh-snug); letter-spacing: var(--ls-title); }
.etlo-h5 { font-family: var(--font-ui); font-weight: var(--fw-medium);   font-size: var(--fs-headline-5); line-height: var(--lh-normal); letter-spacing: var(--ls-title); }
.etlo-body    { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-body);    line-height: var(--lh-normal); letter-spacing: var(--ls-body); }
.etlo-body-md { font-family: var(--font-ui); font-weight: var(--fw-medium);  font-size: var(--fs-body);    line-height: var(--lh-normal); letter-spacing: var(--ls-body); }
.etlo-body-sm { font-family: var(--font-ui); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-normal); letter-spacing: var(--ls-body); }
.etlo-caption { font-family: var(--font-ui); font-weight: var(--fw-medium);  font-size: var(--fs-caption); line-height: var(--lh-normal); }