/* ==========================================================
   WHALE OS Typography Design System v3.5 (Relate Edition)
   Font Stack: Cairo (Arabic Primary) + Inter (Latin/Metrics)
   Strict Scale • Negative Tracking on Titles • High Legibility
   ========================================================== */

:root {
  /* Font Families */
  --font-arabic: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-inter: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-heading: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Cairo', 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', 'Consolas', monospace;

  /* Type Scale */
  --text-caption: 12px;
  --leading-caption: 1.35;
  --text-body-sm: 13px;
  --leading-body-sm: 1.45;
  --text-body: 14px;
  --leading-body: 1.55;
  --text-subheading: 16px;
  --leading-subheading: 1.4;
  --text-heading-sm: 18px;
  --leading-heading-sm: 1.35;
  --text-heading: 22px;
  --leading-heading: 1.25;
  --text-heading-lg: 28px;
  --leading-heading-lg: 1.2;
  --text-display: 36px;
  --leading-display: 1.15;

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

  /* Letter Spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.02em;

  /* Backward Compatibility Aliases */
  --fs-xs: var(--text-caption);
  --fs-sm: var(--text-body-sm);
  --fs-md: var(--text-body);
  --fs-lg: var(--text-subheading);
  --fs-xl: var(--text-heading-sm);
  --fs-2xl: var(--text-heading);
  --fs-3xl: var(--text-heading-lg);
  --fs-4xl: var(--text-display);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings with tight, confident tracking */
h1, .h1, .page-title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-lg);
  font-weight: var(--fw-bold);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: 8px;
}

h2, .h2, .section-title {
  font-family: var(--font-heading);
  font-size: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin-bottom: 6px;
}

h3, .h3, .card-title {
  font-family: var(--font-heading);
  font-size: var(--text-heading-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-heading-sm);
  color: var(--text-primary);
  margin-bottom: 4px;
}

h4, .h4, .subheading {
  font-family: var(--font-heading);
  font-size: var(--text-subheading);
  font-weight: var(--fw-semibold);
  line-height: var(--leading-subheading);
  color: var(--text-primary);
}

p, .body-text {
  font-size: var(--text-body);
  color: var(--text-body);
  line-height: var(--leading-body);
}

.text-caption, .caption {
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  color: var(--text-muted);
}

.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-primary { color: var(--text-primary) !important; }
.text-accent { color: var(--accent) !important; }