/* ==========================================================================
   Maktabi — design tokens (the ONLY place colours are defined)
   Source: docs/TECHNICAL_REFERENCE.md §4
   ========================================================================== */

:root {
  color-scheme: light;

  /* surfaces */
  --bg: #ffffff;
  --bg-alt: #f7f7f9;
  --surface: rgba(0, 0, 0, .03);
  --surface-solid: #ffffff;
  --border: rgba(0, 0, 0, .08);
  --border-strong: rgba(0, 0, 0, .14);

  /* text */
  --text: #0c0b11;
  --text-2: #4b5563;
  --muted: #71717a;

  /* accent */
  --accent: #6d28d9;
  --accent-soft: #ece9fd;
  --accent-border: #ddd6fe;
  --grad-from: #5b2da9;
  --grad-to: #0271cd;

  /* semantic */
  --ok: #15803d;
  --ok-soft: #dcfce7;
  --danger: #dc2626;
  --neutral-btn: #f2f2f7;

  /* gradients */
  --grad: linear-gradient(90deg, var(--grad-from), var(--grad-to));
  --grad-135: linear-gradient(135deg, var(--grad-from), var(--grad-to));

  /* hero / cta glow */
  --glow-1: rgba(139, 92, 246, .28);
  --glow-2: rgba(59, 130, 246, .18);
  --glow-3: rgba(56, 189, 248, .18);
  /* 404 wash — measured at .15 over both #fff and #000, so one value serves both themes */
  --glow-nf: rgba(139, 92, 246, .15);

  /* type families — one family site-wide, Latin + Arabic */
  --ff-head: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-body: "Readex Pro", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* type scale — size / line-height / weight
     Every value below is a *measurement* of the reference shots, not a guess:
     see docs/TECHNICAL_REFERENCE.md §4.1 for the ink-width / line-pitch evidence. */
  --fs-h1: 72px;      --lh-h1: 1.10;
  --fs-h1-sm: 54px;   --lh-h1-sm: 1.10;
  --fs-h2: 51px;      --lh-h2: 1.18;   /* ink pitch 60px */
  --fs-h3: 36px;      --lh-h3: 1.28;   /* ink pitch 46px */
  --fs-h4: 21px;      --lh-h4: 1.48;   /* ink pitch 31px */
  --fs-lead: 18px;    --lh-lead: 1.78; /* ink pitch 32px */
  --fs-body: 14.5px;  --lh-body: 1.90; /* ink pitch 27.5px */
  --fs-sm: 12.6px;    --lh-sm: 1.75;   /* ink pitch 22px */
  --fs-xs: 12.5px;    --lh-xs: 1.45;
  --fs-eyebrow: 11.5px;
  --fs-stat: 46px;

  /* radius */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* shadow */
  --sh-card: 0 1px 2px rgba(0, 0, 0, .04);
  --sh-lift: 0 14px 34px rgba(17, 17, 26, .10);
  --sh-mock: 0 24px 70px rgba(17, 17, 26, .14);
  --sh-pop: 0 20px 50px rgba(109, 40, 217, .18);

  /* layout */
  --container: 1120px;
  --pad: 40px;
  --nav-h: 64px;
  --sec: 120px;
  --sec-sm: 96px;

  /* motion */
  --t: 160ms ease;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --bg: #000000;
  --bg-alt: #0b0a0f;
  --surface: rgba(255, 255, 255, .05);
  --surface-solid: #0e0e12;
  --border: rgba(255, 255, 255, .09);
  --border-strong: rgba(255, 255, 255, .16);

  --text: #fafafa;
  --text-2: #c7c7cd;
  --muted: #a1a1aa;

  --accent: #8b5cf6;
  --accent-soft: rgba(139, 92, 246, .16);
  --accent-border: rgba(139, 92, 246, .32);
  --grad-from: #8b5cf6;
  --grad-to: #0295ff;

  --ok: #4ade80;
  --ok-soft: rgba(74, 222, 128, .14);
  --danger: #f87171;
  --neutral-btn: rgba(255, 255, 255, .09);

  --sh-card: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-lift: 0 16px 38px rgba(0, 0, 0, .55);
  --sh-mock: 0 24px 70px rgba(0, 0, 0, .6);
  --sh-pop: 0 20px 50px rgba(139, 92, 246, .22);

  --glow-1: rgba(139, 92, 246, .32);
  --glow-2: rgba(59, 130, 246, .18);
  --glow-3: rgba(56, 189, 248, .18);
}

/* Arabic: same Readex Pro (native Arabic glyphs), taller lines, no letter-spacing */
[lang="ar"] {
  --ff-head: "Readex Pro", "Noto Kufi Arabic", system-ui, sans-serif;
  --ff-body: "Readex Pro", "Noto Kufi Arabic", system-ui, sans-serif;
  --fs-h1: 64px;
}