/* ========================================
   VARIABLES GLOBALES (HORS COULEURS)
   ======================================== */

/* Import geometric font for brand (Rajdhani) */
/* Import requested display and body fonts. If a font isn't available via Google
   Fonts the browser will fallback to the listed fallback fonts. If you have
   local/font files (woff2) I can add them via @font-face instead. */
@import url('https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap');
@import url('https://use.typekit.net/iwd4rmv.css');
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&display=swap');

:root {
   /* Typographie */
   /* Loaded fonts: Rajdhani for geometric feel. Bruno Ace can be added if available locally. */
   --font-main: 'Bruno Ace', 'Rajdhani', Arial, sans-serif; /* display / headings */
   --font-secondary: 'Loos', 'Rajdhani', Arial, sans-serif; /* body / UI */
   --font-echo: var(--font-secondary);
   --font-mono: 'Courier New', monospace;

   /* Espacements */
   --spacing-xs: 6px;
   --spacing-sm: 12px;
   --spacing-md: 20px;
   --spacing-lg: 35px;
   --spacing-xl: 60px;

   /* Bordures et radius */
   --border-radius-sm: 2px;
   --border-radius-md: 4px;
   --border-radius-lg: 8px;

   /* Transitions */
   --transition-fast: 0.15s;
   --transition-normal: 0.3s;
   --transition-slow: 0.5s;
}