/* Cash Clinic — Base element styles & typographic roles
   Lightweight, opt-in-friendly resets keyed to the tokens. */

:root { color-scheme: light; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* RTL support — the brand is bilingual (Arabic / English) */
[dir="rtl"] { text-align: right; }

/* ---- Typographic role classes ---- */
.cc-display {
  font-family: var(--font-display);
  font-weight: var(--text-display-weight);
  font-size: clamp(2.4rem, 1.5rem + 4vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--text-brand);
}
.cc-h1 { font-weight: var(--fw-light);  font-size: var(--fs-4xl); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); margin: 0; }
.cc-h2 { font-weight: var(--fw-light);  font-size: var(--fs-3xl); line-height: var(--lh-snug);  letter-spacing: var(--ls-tight); margin: 0; }
.cc-h3 { font-weight: var(--fw-medium); font-size: var(--fs-2xl); line-height: var(--lh-snug);  margin: 0; }
.cc-h4 { font-weight: var(--fw-medium); font-size: var(--fs-xl);  line-height: var(--lh-snug);  margin: 0; }
.cc-h5 { font-weight: var(--fw-semibold); font-size: var(--fs-lg); line-height: var(--lh-snug); margin: 0; }
.cc-body      { font-size: var(--fs-md); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.cc-body-lg   { font-size: var(--fs-lg); line-height: var(--lh-relaxed); color: var(--text-secondary); }
.cc-small     { font-size: var(--fs-sm); line-height: var(--lh-normal); color: var(--text-muted); }
.cc-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--text-eyebrow-weight);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--accent-secondary);
}

a { color: var(--text-link); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

::selection { background: var(--cc-cream); color: var(--cc-purple); }

:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-xs);
}