/* tokens.css — MD-Moda design system. Shared verbatim between mockup and WP theme. */
:root {
  /* Color */
  --color-primary: #2A1830;        /* Aubergine 900 — ink, buttons, headings */
  --color-primary-hover: #512A56;  /* Aubergine 700 */
  --color-accent: #C0876A;         /* Rose-gold — decorative fills, hairlines, large display only (NOT body text). */
  --color-accent-hover: #B0714F;   /* Rose-gold deep */
  --color-accent-strong: #8E4F2E;  /* Darker rose-gold for TEXT + badge backgrounds — WCAG AA (≥4.5:1 on cream/white, white text on it ≥6:1). */
  --color-champagne: #EBCBA8;
  --color-background: #FAF5EF;      /* Cream */
  --color-surface: #FFFFFF;
  --color-foreground: #20131F;     /* Body text */
  --color-muted: #F2E9DF;          /* near-cream BACKGROUND tint (trust-bar/section-alt). NOT for text. */
  --color-text-muted: #6E5F67;     /* muted TEXT — mauve-gray, WCAG AA on cream/white/section-alt. */
  --color-border: #E3D2C0;
  --color-on-primary: #FAF5EF;
  --color-destructive: #B3261E;

  /* Typography */
  --font-heading-ar: "Reem Kufi", "Cormorant", serif;
  --font-body-ar: "Tajawal", "Montserrat", sans-serif;
  --font-heading-latin: "Cormorant", serif;
  --font-body-latin: "Montserrat", sans-serif;

  /* Spacing */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(42,24,48,0.06);
  --shadow-md: 0 4px 6px rgba(42,24,48,0.10);
  --shadow-lg: 0 10px 15px rgba(42,24,48,0.10);
  --shadow-xl: 0 20px 25px rgba(42,24,48,0.15);

  /* Radius & motion */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-micro: 200ms;
  --dur-hero: 500ms;

  /* Layout */
  --container: 1280px;
  --header-h: 76px;
}