/* ============================================================
   Syria design system v1.0 tokens (from "Syria Design System v6")
   ============================================================ */
:root {
  --white: #ffffff;
  --cream: #fff9f3;
  --sand-200: #f1e6dd;
  --sand-300: #ddd0c6;
  --sand-50: #f7efe8;
  --mauve-400: #aba1b5;
  --mauve-500: #6f6580;
  --plum-600: #524868;
  --plum-700: #3a2e4f;
  --plum: #2a1b3d;
  --rose: #c92a62;
  --rose-dark: #a8214f;
  --violet: #5b3fd9;
  --blush: #fde7ef;
  --amber: #f5a524;

  --font-display: var(--font-bricolage), var(--font-alexandria), system-ui, sans-serif;
  --font-body: var(--font-readex), system-ui, sans-serif;

  --r-xs: 4px;
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;

  --shadow-1: 0 2px 8px rgba(16, 24, 40, 0.08);
  --shadow-2: 0 12px 40px rgba(16, 24, 40, 0.16);

  /* motion: system easing + a stronger cinematic in-out for reveals */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-cine: cubic-bezier(0.77, 0, 0.175, 1);

  --page-x: 80px;
  --max: 1280px;
  --nav-h: 64px;
  --sec: clamp(48px, 6vw, 80px);
}
@media (max-width: 1439px) { :root { --page-x: 48px; } }
@media (max-width: 1023px) { :root { --page-x: 32px; } }
@media (max-width: 767px) { :root { --page-x: 16px; --nav-h: 60px; } }