:root {
  /* Color — from docs/design/02-tokens.md, do not introduce values outside this scale */
  --color-bg: #F5EAD8;
  --color-surface: #EBDDC5;
  --color-card: #FFFFFF;
  --color-text: #201E1D;
  --color-text-muted: #645C50;
  --color-text-muted-dark: #A19786;
  --color-accent: #C67139;
  --color-accent2: #7A8A5E;
  --color-divider: rgba(32, 30, 29, 0.16);

  --accent-100: #FFF2EB; --accent-200: #FFE1D0; --accent-300: #FFC6A5;
  --accent-400: #F6A06B; --accent-500: #D67F48; --accent-600: #B2622D;
  --accent-700: #8C491A; --accent-800: #643312; --accent-900: #402310;

  --accent2-100: #F0FAE1; --accent2-200: #E1EECC; --accent2-300: #CCDBB2;
  --accent2-400: #AEBF92; --accent2-500: #8FA073; --accent2-600: #728157;
  --accent2-700: #56633F; --accent2-800: #3D472B; --accent2-900: #272E1B;

  --neutral-100: #F9F4ED; --neutral-200: #EEE7DB; --neutral-300: #DCD3C4;
  --neutral-400: #C0B6A5; --neutral-500: #A19786; --neutral-600: #82796A;
  --neutral-700: #645C50; --neutral-800: #474238; --neutral-900: #2E2B25;

  /* Type — thmanyah serif display / thmanyah serif text (licensed for web,
     confirmed 2026-08-30; see css/fonts.css). The fallback stack is what
     renders in the gap before the webfont loads (font-display: swap in
     fonts.css keeps text visible throughout, never invisible) — system-ui
     is used rather than a mismatched serif fallback because its Arabic
     metrics are the most consistent across platforms, which keeps that
     gap's reflow small. Nothing else in the stylesheet references a
     family name directly, so changing weights or swapping the face again
     later is a two-line edit here. */
  --font-display: 'thmanyah serif display', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --font-body: 'thmanyah serif text', -apple-system, 'Segoe UI', system-ui, sans-serif;

  /* Radius — 20-28 on containers, 999 on pills, per brand language */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-card: 24px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Spacing — app scale (4.4 · 8.8 · 13.2 · 17.6 · 26.4 · 35.2, rounded)
     extended upward for landing-page section rhythm */
  --space-1: 4px;
  --space-2: 9px;
  --space-3: 13px;
  --space-4: 18px;
  --space-5: 26px;
  --space-6: 35px;
  --space-7: 52px;
  --space-8: 70px;
  --space-9: 104px;

  /* Elevation */
  --shadow-card: 0 1px 2px rgba(46, 43, 37, 0.14);
  --shadow-floating: 0 3px 10px rgba(46, 43, 37, 0.16);
  --shadow-dialog: 0 12px 32px rgba(46, 43, 37, 0.22);

  --container-max: 1080px;
}