/*
 * TKAWEN Brand · Typography tokens
 *
 * Two-script system:
 *   - Latin (Inter, variable, weights 100–900)
 *   - Arabic (Cairo, variable, weights 200–1000)
 * Both load from Google Fonts CDN. Self-host for production via fontsource if desired.
 *
 * Usage:
 *   1. Import this file in your root stylesheet.
 *   2. Apply class="tkw-font-display" / "tkw-font-body" / "tkw-font-mono" or use vars.
 */

/* ═══════════════ FONT IMPORTS ═══════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&family=Cairo:wght@200..1000&family=JetBrains+Mono:wght@400..700&display=swap');

:root {
  /* ═══════════════ FONT FAMILIES ═══════════════ */
  /* Display: same stack used for marks/headlines on every TKAWEN surface.        */
  /* Browser picks Cairo when content is Arabic (system shaping rule),            */
  /* and Inter otherwise. unicode-range coverage handled by Google Fonts CSS.     */
  --tkw-font-display: 'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tkw-font-body:    'Inter', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --tkw-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', monospace;

  /* ═══════════════ FONT WEIGHTS ═══════════════ */
  --tkw-fw-regular: 400;
  --tkw-fw-medium:  500;
  --tkw-fw-semi:    600;
  --tkw-fw-bold:    700;
  --tkw-fw-extra:   800;
  --tkw-fw-black:   900;

  /* ═══════════════ TYPE SCALE ═══════════════ */
  /* Modular scale 1.250 (major third) — works for Latin and Arabic.              */
  /* Line-heights tuned for Cairo's slightly taller cap height.                   */
  --tkw-text-xs:   0.75rem;   /* 12 */
  --tkw-text-sm:   0.875rem;  /* 14 */
  --tkw-text-base: 1rem;      /* 16 */
  --tkw-text-lg:   1.125rem;  /* 18 */
  --tkw-text-xl:   1.25rem;   /* 20 */
  --tkw-text-2xl:  1.5rem;    /* 24 */
  --tkw-text-3xl:  1.875rem;  /* 30 */
  --tkw-text-4xl:  2.25rem;   /* 36 */
  --tkw-text-5xl:  3rem;      /* 48 */
  --tkw-text-6xl:  3.75rem;   /* 60 */
  --tkw-text-7xl:  4.5rem;    /* 72 */

  /* ═══════════════ LINE HEIGHTS ═══════════════ */
  --tkw-lh-tight:    1.05;   /* display headlines */
  --tkw-lh-snug:     1.25;   /* short headings */
  --tkw-lh-normal:   1.5;    /* body */
  --tkw-lh-relaxed:  1.75;   /* long-form Arabic — Cairo benefits from extra leading */
  --tkw-lh-loose:    2;

  /* ═══════════════ LETTER SPACING ═══════════════ */
  /* Latin: tight tracking on display weights (Apple/Stripe convention).          */
  /* Arabic: NEVER use negative letter-spacing on Arabic — break ligatures.       */
  --tkw-tracking-tightest: -0.045em;  /* logos and large display only */
  --tkw-tracking-tight:    -0.025em;  /* headings */
  --tkw-tracking-normal:   0;
  --tkw-tracking-wide:     0.04em;
  --tkw-tracking-wider:    0.08em;
  --tkw-tracking-widest:   0.14em;    /* eyebrow labels, ALL-CAPS tags */
}

/* ═══════════════ UTILITY CLASSES ═══════════════ */

.tkw-font-display { font-family: var(--tkw-font-display); }
.tkw-font-body    { font-family: var(--tkw-font-body); }
.tkw-font-mono    { font-family: var(--tkw-font-mono); }

/* Document defaults — apply to body in every product app */
.tkw-prose {
  font-family: var(--tkw-font-body);
  font-weight: var(--tkw-fw-regular);
  font-size: var(--tkw-text-base);
  line-height: var(--tkw-lh-normal);
  color: var(--tkw-text-primary);
}

/* Arabic-specific document defaults — apply when dir="rtl" */
[dir="rtl"] .tkw-prose,
.tkw-prose[dir="rtl"] {
  font-family: 'Cairo', var(--tkw-font-body);
  line-height: var(--tkw-lh-relaxed);   /* Arabic needs more leading */
  letter-spacing: 0;                     /* Don't tighten Arabic */
}

/* Display headings — for hero copy across landings */
.tkw-display-1 {
  font-family: var(--tkw-font-display);
  font-size: var(--tkw-text-7xl);
  font-weight: var(--tkw-fw-black);
  line-height: var(--tkw-lh-tight);
  letter-spacing: var(--tkw-tracking-tightest);
}
.tkw-display-2 {
  font-family: var(--tkw-font-display);
  font-size: var(--tkw-text-5xl);
  font-weight: var(--tkw-fw-black);
  line-height: var(--tkw-lh-tight);
  letter-spacing: var(--tkw-tracking-tight);
}
.tkw-display-3 {
  font-family: var(--tkw-font-display);
  font-size: var(--tkw-text-4xl);
  font-weight: var(--tkw-fw-extra);
  line-height: var(--tkw-lh-snug);
  letter-spacing: var(--tkw-tracking-tight);
}

/* Headings */
.tkw-h1 { font-size: var(--tkw-text-4xl); font-weight: var(--tkw-fw-black);  line-height: var(--tkw-lh-snug); letter-spacing: var(--tkw-tracking-tight); }
.tkw-h2 { font-size: var(--tkw-text-3xl); font-weight: var(--tkw-fw-extra);  line-height: var(--tkw-lh-snug); letter-spacing: var(--tkw-tracking-tight); }
.tkw-h3 { font-size: var(--tkw-text-2xl); font-weight: var(--tkw-fw-bold);   line-height: var(--tkw-lh-snug); letter-spacing: var(--tkw-tracking-tight); }
.tkw-h4 { font-size: var(--tkw-text-xl);  font-weight: var(--tkw-fw-bold);   line-height: var(--tkw-lh-normal); }
.tkw-h5 { font-size: var(--tkw-text-lg);  font-weight: var(--tkw-fw-semi);   line-height: var(--tkw-lh-normal); }

/* Eyebrow / category label */
.tkw-eyebrow {
  font-family: var(--tkw-font-display);
  font-size: var(--tkw-text-xs);
  font-weight: var(--tkw-fw-extra);
  text-transform: uppercase;
  letter-spacing: var(--tkw-tracking-widest);
  color: var(--tkw-text-secondary);
}

/* Numerals — always tabular for tables/dashboards/dz-context (Western digits only per brand law) */
.tkw-num     { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.tkw-lat-num { unicode-bidi: bidi-override; direction: ltr; }
