/* Rawda Al-Aqsa — design tokens (mirrors brand/tokens/design-tokens.json; keep in sync).
   WCAG 2.2 AA contrast intent annotated in the JSON source. */
:root {
  /* color */
  --color-primary: #0F4C3A;
  --color-primary-700: #0B3A2D;
  --color-primary-100: #E6F0EB;
  --color-accent: #B58128;       /* decorative + large text only */
  --color-accent-ink: #7A5413;   /* AA for small text on light */
  --color-accent-gold: #C9A24B;  /* large/decor on dark green only */
  --color-ink: #18211C;
  --color-ink-soft: #4F5A54;
  --color-muted: #6B6452;
  --color-bg: #FAF8F4;
  --color-surface: #FFFFFF;
  --color-border: #D2C9B8;
  --color-border-soft: #E4DDD0;
  --color-on-primary: #FFFFFF;
  --color-on-primary-soft: #D9E7E0;
  --color-success: #2E7D5B;
  --color-focus: #0F4C3A;

  /* type */
  --font-base: "Cairo", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Cairo", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800;

  --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1.0625rem; --fs-md: 1.1875rem;
  --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 2.875rem; --fs-4xl: 3.5rem;
  --lh-tight: 1.2; --lh-snug: 1.35; --lh-body: 1.75;

  /* space */
  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-6: 1.5rem;
  --sp-8: 2rem; --sp-12: 3rem; --sp-16: 4rem; --sp-24: 6rem;

  /* radius / shadow */
  --radius-sm: 0.375rem; --radius-md: 0.625rem; --radius-lg: 1rem; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(24,33,28,0.06), 0 1px 3px rgba(24,33,28,0.05);
  --shadow-md: 0 4px 12px rgba(24,33,28,0.08), 0 2px 4px rgba(24,33,28,0.05);
  --shadow-lg: 0 12px 32px rgba(24,33,28,0.12), 0 4px 8px rgba(24,33,28,0.06);

  /* size / motion / z */
  --size-container: 72rem;
  --size-reading: 65ch;
  --tap-min: 24px;       /* WCAG 2.2 SC 2.5.8 minimum */
  --tap-comfort: 44px;   /* comfort target for primary controls */
  --motion-fast: 120ms; --motion-base: 180ms; --ease: cubic-bezier(0.2,0,0.2,1);
  --z-header: 100; --z-overlay: 200; --z-skip: 300;
}