/* ========================================
   DESIGN TOKENS — Dahira Mafatihoul Bichri
   ======================================== */

:root {
  /* --- Couleurs principales --- */
  --color-primary-900: #063d30;
  --color-primary-800: #0a5443;
  --color-primary-700: #0F6E56;
  --color-primary-600: #148a6c;
  --color-primary-500: #1D9E75;
  --color-primary-400: #3db88f;
  --color-primary-300: #6dcfab;
  --color-primary-200: #a8e4cc;
  --color-primary-100: #d4f2e6;
  --color-primary-50: #E1F5EE;

  /* --- Accent doré (spiritualité) --- */
  --color-gold-700: #8B6914;
  --color-gold-600: #A67C1A;
  --color-gold-500: #C4972A;
  --color-gold-400: #D4AD4A;
  --color-gold-300: #E4C96E;
  --color-gold-200: #F0DFA0;
  --color-gold-100: #F8F0D0;
  --color-gold-50: #FDFAED;

  /* --- Neutres --- */
  --color-neutral-950: #0a0f0d;
  --color-neutral-900: #141c18;
  --color-neutral-800: #1e2b24;
  --color-neutral-700: #2d3f35;
  --color-neutral-600: #455a4e;
  --color-neutral-500: #627568;
  --color-neutral-400: #8a9c90;
  --color-neutral-300: #b0bfb5;
  --color-neutral-200: #d2ddd6;
  --color-neutral-100: #e8efe9;
  --color-neutral-50: #f4f7f5;

  --color-white: #ffffff;
  --color-black: #000000;

  /* --- Sémantiques --- */
  --color-success: #1D9E75;
  --color-upcoming: #1D9E75;
  --color-past: #8a9c90;

  /* --- Typographie --- */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Playfair Display', 'Georgia', serif;
  --font-arabic: 'Amiri', serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  --tracking-widest: 0.1em;

  /* --- Espacement --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  /* --- Rayons --- */
  --radius-sm: 0.375rem;
  --radius-md: 0.625rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-full: 9999px;

  /* --- Ombres --- */
  --shadow-xs: 0 1px 2px rgba(10, 15, 13, 0.04);
  --shadow-sm: 0 1px 3px rgba(10, 15, 13, 0.06), 0 1px 2px rgba(10, 15, 13, 0.04);
  --shadow-md: 0 4px 6px rgba(10, 15, 13, 0.05), 0 2px 4px rgba(10, 15, 13, 0.04);
  --shadow-lg: 0 10px 15px rgba(10, 15, 13, 0.06), 0 4px 6px rgba(10, 15, 13, 0.04);
  --shadow-xl: 0 20px 25px rgba(10, 15, 13, 0.08), 0 8px 10px rgba(10, 15, 13, 0.04);
  --shadow-2xl: 0 25px 50px rgba(10, 15, 13, 0.12);
  --shadow-glow: 0 0 40px rgba(29, 158, 117, 0.15);
  --shadow-gold: 0 0 30px rgba(196, 151, 42, 0.1);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* --- Largeurs --- */
  --max-width: 1200px;
  --max-width-narrow: 800px;

  /* --- Z-index --- */
  --z-nav: 100;
  --z-overlay: 50;
  --z-modal: 200;
}