/* tokens.css — design tokens. One source of truth for color, type, spacing.
   Identity: the maghrib sky (where the new month is born and Maghrib begins)
   read in emerald (brand) and crescent gold. Boldness lives only in the hero. */
:root {
  /* brand + accents */
  --emerald: #0f9d6e;
  --emerald-deep: #0a6e4e;
  --emerald-tint: #e7f6f0;
  --gold: #e0a93b;       /* hilal crescent */
  --gold-soft: #f7e7c4;
  --gold-deep: #b07a26;
  --indigo: #1b2440;
  --indigo-2: #243056;

  /* maghrib sky — hero signature (stays dark in both themes) */
  --mgb-1: #11172f;      /* zenith */
  --mgb-2: #20244a;      /* upper dusk */
  --mgb-3: #3a2f5e;      /* lower dusk / violet */
  --mgb-glow: rgba(224, 150, 70, 0.55);   /* warm horizon glow */
  --mgb-halo: rgba(224, 169, 59, 0.20);   /* soft halo near crescent */
  --hero-ink: #fdf6ea;   /* light text on the sky */

  /* neutral surfaces (light) */
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #edf0f4;
  --line: #e3e8ef;
  --ink: #16202e;
  --ink-2: #4a5567;
  --ink-3: #8995a6;

  /* semantic */
  --ok: #0f9d6e;
  --warn: #cf8420;
  --soft-warn-bg: #fbf1df;

  /* type */
  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-ui: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  --font-num: 'Plus Jakarta Sans', system-ui, sans-serif;

  /* scale (mobile-first) */
  --t-hero: 2.8rem;
  --t-h1: 1.5rem;
  --t-h2: 1.125rem;
  --t-body: 0.95rem;
  --t-small: 0.8rem;
  --t-eyebrow: 0.66rem;

  /* spacing + shape */
  --sp: 16px;
  --sp-sm: 10px;
  --sp-xs: 6px;
  --sp-lg: 24px;
  --r: 16px;
  --r-sm: 10px;
  --r-lg: 22px;
  --shadow: 0 10px 30px rgba(16, 32, 46, 0.10);
  --shadow-sm: 0 1px 3px rgba(16, 32, 46, 0.04), 0 6px 18px rgba(16, 32, 46, 0.06);
  --maxw: 480px;
  --nav-h: 76px;
}

:root[data-theme='dark'] {
  --bg: #0b0f17;
  --surface: #141b29;
  --surface-2: #1c2538;
  --line: #283448;
  --ink: #eef2f7;
  --ink-2: #abb6c6;
  --ink-3: #6f7c8d;
  --emerald-tint: #11241d;
  --soft-warn-bg: #2a2113;
  --shadow: 0 12px 34px rgba(0, 0, 0, 0.5);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.35);
}