/* Design tokens. Every colour, size, space, radius and shadow used by the site is defined here.
   Components use the semantic tokens (--surface, --text-muted …), never the raw palette, so the dark theme
   only needs to redefine the semantic layer. Contrast ratios (WCAG) are noted where text uses a colour. */

:root {
  /* ---- Brand palette ---- */
  --emerald-900: #103729;   /* dark emerald */
  --emerald-800: #174A37;   /* deep emerald (primary) — 9.0:1 on ivory */
  --emerald-700: #1E5C45;
  --emerald-100: #DCE8DF;   /* soft sage */
  --emerald-50: #EEF4EF;
  --ivory: #F4F1E8;         /* warm ivory (page) */
  --ivory-200: #EAE5D7;
  --gold: #C5A66A;          /* muted gold: decoration and large text on dark emerald only */
  --gold-ink: #7A5E24;      /* gold-toned small text on light backgrounds — 5.4:1 on ivory */
  --gold-soft: #EFE5CC;
  --white: #FFFFFF;
  --ink: #202A24;           /* primary text — 13.1:1 on ivory */
  --ink-muted: #5E6862;     /* secondary text — 5.1:1 on ivory, 4.6:1 on sage (brief's #69736C failed AA) */
  --ink-subtle: #69736C;    /* non-text details only */
  --line: #E2E5DC;
  --danger-ink: #A12C2C;
  --success-ink: #1F6B3A;

  /* ---- Semantic colours: light theme ---- */
  --bg: var(--ivory);
  --surface: var(--white);
  --surface-muted: var(--emerald-50);
  --surface-sunken: var(--ivory-200);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --border: var(--line);
  --border-strong: #C9D1C4;
  --primary: var(--emerald-800);
  --primary-hover: var(--emerald-900);
  --on-primary: var(--white);
  --primary-soft: var(--emerald-100);
  --on-primary-soft: var(--emerald-900);
  --accent: var(--gold);
  --accent-ink: var(--gold-ink);
  --accent-soft: var(--gold-soft);
  --link: var(--emerald-800);
  --focus: var(--emerald-800);
  --danger: var(--danger-ink);
  --danger-soft: #F7E3E1;
  --success: var(--success-ink);
  --success-soft: #DFF0E3;
  --header-bg: rgba(244, 241, 232, .94);
  --band-bg: var(--emerald-900);        /* emerald welcome band */
  --band-text: #F4F1E8;                 /* 11.6:1 on dark emerald */
  --band-muted: #C8D6CB;                /* 8.6:1 on dark emerald */
  --band-accent: var(--gold);           /* 5.65:1 on dark emerald */
  --overlay: rgba(10, 28, 21, .55);
  --sepia-bg: #F5ECD7;
  --sepia-text: #3B2F1C;
  --shadow-sm: 0 1px 2px rgba(16, 55, 41, .06);
  --shadow: 0 1px 2px rgba(16, 55, 41, .05), 0 4px 14px rgba(16, 55, 41, .06);
  --shadow-lg: 0 16px 40px rgba(16, 55, 41, .16);
  color-scheme: light;

  /* ---- Typography ---- */
  --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-arabic-ui: "Noto Sans Arabic", "Segoe UI", Tahoma, "Geeza Pro", Arial, sans-serif;
  --font-urdu: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Urdu Typesetting", "Noto Sans Arabic", serif;
  --font-quran: "Amiri", "Noto Naskh Arabic", "Traditional Arabic", "Scheherazade New", serif;
  --font-ui: var(--font-latin);          /* buttons, navigation, labels */
  --font-text: var(--font-latin);        /* headings, paragraphs, translations */
  --lh-text: 1.6;
  --lh-heading: 1.25;

  --fs-xs: .75rem;
  --fs-sm: .875rem;
  --fs-base: 1rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.375rem, 1.2rem + .7vw, 1.625rem);
  --fs-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2.125rem);
  --fs-3xl: clamp(1.875rem, 1.4rem + 2.2vw, 2.75rem);

  /* ---- Spacing (4 px steps) ---- */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* ---- Shape ---- */
  --radius-sm: .5rem;
  --radius: .75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-pill: 999px;

  /* ---- Layout ---- */
  --container: 72rem;
  --reading: 44rem;
  --gutter: 1rem;
  --header-h: 3.75rem;
  --bottom-nav-h: 4.25rem;
  --tap: 2.75rem;                         /* minimum touch target (44 px) */
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --duration: .18s;
}

@media (min-width: 768px) {
  :root { --gutter: 1.5rem; --header-h: 4rem; }
}
@media (min-width: 1024px) {
  :root { --gutter: 2rem; --header-h: 4.5rem; }
}

/* ---- Dark theme: emerald night with gold accents ---- */
:root[data-theme="dark"] {
  --bg: #0D1E17;
  --surface: #13281F;
  --surface-muted: #1A3328;
  --surface-sunken: #0A1812;
  --text: #E8ECE5;                       /* 14.5:1 on bg */
  --text-muted: #A3B0A7;                 /* 6.9:1 on surface */
  --border: #26402F;
  --border-strong: #3A5A48;
  --primary: #D4B97F;                    /* gold buttons with dark text — 9.1:1 */
  --primary-hover: #E2CB97;
  --on-primary: #10241A;
  --primary-soft: #1F3D30;
  --on-primary-soft: #E8ECE5;
  --accent: #D4B97F;
  --accent-ink: #D4B97F;
  --accent-soft: #2A2A1C;
  --link: #DCC48F;
  --focus: #E2CB97;
  --danger: #F2A7A0;
  --danger-soft: #3A1F1D;
  --success: #9FD8AE;
  --success-soft: #1A3324;
  --header-bg: rgba(13, 30, 23, .92);
  --band-bg: #0A1A13;
  --band-text: #F4F1E8;
  --band-muted: #AEBDB2;
  --band-accent: #D4B97F;
  --overlay: rgba(0, 0, 0, .6);
  --sepia-bg: #2B2519;
  --sepia-text: #EFE5CE;
  --shadow-sm: none;
  --shadow: 0 1px 2px rgba(0, 0, 0, .35);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, .5);
  color-scheme: dark;
}

/* ---- Script-specific fonts ---- */
:root:lang(ar) {
  --font-ui: var(--font-arabic-ui);
  --font-text: var(--font-arabic-ui);
  --lh-text: 1.8;
}
:root:lang(ur) {
  --font-ui: var(--font-arabic-ui);      /* compact Naskh for small controls */
  --font-text: var(--font-urdu);         /* Nastaliq for reading text and headings */
  --lh-text: 2.1;
  --lh-heading: 1.9;
}
/* :lang(ur) also matches Roman Urdu (ur-Latn), which is written in Latin letters */
:root:lang(ur-Latn) {
  --font-ui: var(--font-latin);
  --font-text: var(--font-latin);
  --lh-text: 1.6;
  --lh-heading: 1.25;
}