/* ============================================
   ECOLE NOTRE-DAME DE FLEMALLE
   Design System — Variables & Tokens
   V2 — Modern, Dynamic, Premium
   ============================================ */

:root {
  /* --- Palette principale --- */
  --nd-blue-50: #EFF8FF;
  --nd-blue-100: #DBEFFE;
  --nd-blue-200: #BFE3FE;
  --nd-blue-300: #93D1FD;
  --nd-blue-400: #4AADE4;
  --nd-blue-500: #2B8ED0;
  --nd-blue-600: #1E73B3;
  --nd-blue-700: #1B5C91;
  --nd-blue-800: #1B4F78;
  --nd-blue-900: #1C4264;
  --nd-blue-950: #132A42;

  /* --- Accent chaud (jaune/or) --- */
  --nd-gold-50: #FFFBEB;
  --nd-gold-100: #FEF3C7;
  --nd-gold-200: #FDE68A;
  --nd-gold-300: #FCD34D;
  --nd-gold-400: #F5D547;
  --nd-gold-500: #EAB308;
  --nd-gold-600: #CA8A04;

  /* --- Vert nature (cour verte) --- */
  --nd-green-50: #F0FDF4;
  --nd-green-100: #DCFCE7;
  --nd-green-400: #4ADE80;
  --nd-green-500: #22C55E;
  --nd-green-600: #16A34A;

  /* --- Neutrals --- */
  --nd-slate-50: #F8FAFC;
  --nd-slate-100: #F1F5F9;
  --nd-slate-200: #E2E8F0;
  --nd-slate-300: #CBD5E1;
  --nd-slate-400: #94A3B8;
  --nd-slate-500: #64748B;
  --nd-slate-600: #475569;
  --nd-slate-700: #334155;
  --nd-slate-800: #1E293B;
  --nd-slate-900: #0F172A;

  --nd-white: #FFFFFF;
  --nd-black: #0A0F1A;

  /* --- Semantic aliases --- */
  --color-primary: var(--nd-blue-400);
  --color-primary-dark: var(--nd-blue-700);
  --color-primary-darker: var(--nd-blue-950);
  --color-accent: var(--nd-gold-400);
  --color-accent-dark: var(--nd-gold-600);
  --color-success: var(--nd-green-500);
  --color-bg: var(--nd-white);
  --color-bg-alt: var(--nd-blue-50);
  --color-bg-dark: var(--nd-blue-950);
  --color-text: var(--nd-slate-800);
  --color-text-muted: var(--nd-slate-500);
  --color-text-light: var(--nd-slate-400);
  --color-text-on-dark: var(--nd-slate-100);
  --color-border: var(--nd-slate-200);
  --color-light: var(--nd-slate-50);
  --color-text-secondary: var(--nd-slate-500);

  /* --- Typography --- */
  --font-display: 'Sora', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  --fs-xs: clamp(0.7rem, 0.66rem + 0.2vw, 0.8rem);
  --fs-sm: clamp(0.8rem, 0.75rem + 0.25vw, 0.9rem);
  --fs-base: clamp(0.9rem, 0.85rem + 0.3vw, 1rem);
  --fs-md: clamp(1rem, 0.9rem + 0.4vw, 1.15rem);
  --fs-lg: clamp(1.1rem, 1rem + 0.5vw, 1.35rem);
  --fs-xl: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem);
  --fs-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-4xl: clamp(2.4rem, 1.8rem + 2.5vw, 3.75rem);
  --fs-hero: clamp(2.8rem, 2rem + 3.5vw, 5rem);

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

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

  --ls-tight: -0.025em;
  --ls-normal: 0em;
  --ls-wide: 0.05em;
  --ls-wider: 0.1em;

  /* --- 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;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-section: clamp(4rem, 3rem + 4vw, 7rem);

  /* --- Layout --- */
  --max-width: 1200px;
  --max-width-narrow: 720px;
  --max-width-wide: 1400px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
  --nav-height: 72px;

  /* --- Radius --- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-xs: 0 1px 2px rgba(27,76,120,0.04);
  --shadow-sm: 0 2px 4px rgba(27,76,120,0.06);
  --shadow-md: 0 4px 12px rgba(27,76,120,0.08);
  --shadow-lg: 0 8px 24px rgba(27,76,120,0.10);
  --shadow-xl: 0 16px 48px rgba(27,76,120,0.12);
  --shadow-glow: 0 0 40px rgba(74,173,228,0.2);
  --shadow-glow-gold: 0 0 30px rgba(245,213,71,0.25);

  /* --- Transitions --- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 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-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* --- Z-index --- */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 50;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;
}

/* --- Dark section overrides --- */
.section--dark {
  --color-bg: var(--nd-blue-950);
  --color-text: var(--nd-slate-100);
  --color-text-muted: var(--nd-slate-400);
  --color-border: rgba(255,255,255,0.1);
}