/* Wadi Al-Shaam design tokens. Safety orange on charcoal and cream (BRAND.md at the repo root).
   One ground (cream), one ink (charcoal), one accent (safety orange). Surfaces are told apart by a step in tone,
   never by a line or a shadow. Dark fields carry the hero, the process, the leadership panel and the close. */

:root {
  color-scheme: light;

  /* Brand palette */
  --l0: #FAF7F2;   /* cream ground */
  --l1: #F1EBE1;   /* sand: one tone step down from the ground */
  --l2: #FBE6D3;   /* peach: card tone */
  --l3: #F6C9A3;   /* deep peach: card tone */
  --l4: #1D2830;   /* charcoal panel */
  --l5: #121A22;   /* charcoal field */
  --l6: #0E151B;
  --l7: #0A1015;   /* footer */
  --ink: #121A22;
  --on-dark: #FAF7F2;
  --accent: #F26B21;
  --accent-ink: #B23D0A; /* the accent where it must read as text on cream (4.5:1 or more) */
  --sky-top: #121A22;

  /* Type: Plus Jakarta Sans for headings and Inter for text (Latin); Noto Kufi for Arabic and Kurdish headings, Noto Naskh for reading */
  --font-display: "Plus Jakarta Sans", "Display Fallback", "Noto Kufi Arabic", system-ui, sans-serif;
  --font-body: "Inter", "Body Fallback", "Noto Naskh Arabic", system-ui, sans-serif;

  /* Five sizes do all the work: display, heading, lead, body, small */
  --t-display: clamp(3rem, 1rem + 6.6vw, 7.5rem);
  --t-head: clamp(2rem, 1.1rem + 2.6vw, 3.5rem);
  --t-lead: clamp(1.25rem, 0.95rem + 0.85vw, 1.875rem);
  --t-body: 1.0625rem;
  --t-small: 0.875rem;

  --pill: 999px;
  --gap-section: clamp(5.5rem, 3rem + 7vw, 11rem);
  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);

  --bg: var(--l0);
  --fg: var(--ink);
  --fg-muted: #434C57;
  --btn-bg: var(--accent);
  --btn-fg: var(--ink);
  --focus: var(--ink);
  --error: oklch(0.5 0.18 27);
}

/* Fields: each section sets its ground; dark fields flip the text and keep the orange action */
.f-cream { --bg: var(--l0); }
.f-sand { --bg: var(--l1); }
.f-cream, .f-sand { --fg: var(--ink); --fg-muted: #434C57; --focus: var(--ink); --error: oklch(0.5 0.18 27); }
.f-dark, .site-foot, .site-bar, .drawer {
  --bg: var(--l5);
  --fg: var(--on-dark);
  --fg-muted: oklch(0.84 0.015 95);
  --focus: var(--accent);
  --error: oklch(0.82 0.14 27);
}
.site-foot { --bg: var(--l7); }
.drawer { --bg: var(--l6); }

/* Browser surfaces themed from the palette */
::selection { background: var(--accent); color: var(--ink); }
html { scrollbar-color: var(--l4) var(--l0); caret-color: var(--ink); accent-color: var(--ink); }