/* 
  BCNantes.fr - Design Tokens 
  =============================
  Couleurs, typographie, espacements et ombres.
*/

:root {
  /* =========================================================================
     COULEURS PAYSAGE (Ambiance Bridge)
     ========================================================================= */

  /* Primary Brand - Deep Navy (Pique/Trèfle adapté) */
  --bcn-primary-h: 215;
  --bcn-primary-s: 70%;
  --bcn-primary-l: 25%;
  --color-primary: hsl(var(--bcn-primary-h), var(--bcn-primary-s), var(--bcn-primary-l));
  --color-primary-light: hsl(var(--bcn-primary-h), var(--bcn-primary-s), 35%);
  --color-primary-dark: hsl(var(--bcn-primary-h), var(--bcn-primary-s), 15%);

  /* Accent - Bridge Red (Cœur/Carreau protégé mais élégant) */
  --bcn-accent-h: 350;
  --bcn-accent-s: 80%;
  --bcn-accent-l: 45%;
  --color-accent: hsl(var(--bcn-accent-h), var(--bcn-accent-s), var(--bcn-accent-l));
  --color-accent-hover: hsl(var(--bcn-accent-h), var(--bcn-accent-s), 35%);

  /* Accent - Bridge Green (Table de jeu) */
  --bcn-green-h: 150;
  --bcn-green-s: 40%;
  --bcn-green-l: 35%;
  --color-green: hsl(var(--bcn-green-h), var(--bcn-green-s), var(--bcn-green-l));

  /* Neutrals & Luxe */
  --color-text-main: hsl(220, 20%, 20%);
  --color-text-muted: hsl(220, 15%, 45%);
  --color-bg-page: hsl(210, 20%, 98%); /* Très léger gris/bleu, parfait pour le contraste */
  --color-bg-surface: #ffffff;
  --color-bg-alt: hsl(210, 20%, 95%);
  --color-border: hsl(210, 15%, 90%);
  --color-lux-perle: hsl(210, 20%, 96%); /* Couleur "de luxe" pour les fonds secondaires */

  /* =========================================================================
     TYPOGRAPHIE
     ========================================================================= */

  --font-sans:
    'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Playfair Display', Georgia, serif; /* Pour de belles grandes lettres si besoin */

  --text-xs: 0.875rem; /* 14px */
  --text-sm: 1rem; /* 16px */
  --text-base: 1.25rem; /* 20px - Nouveau standard Premium Senior */
  --text-lg: 1.5rem; /* 24px */
  --text-xl: 1.75rem; /* 28px */
  --text-2xl: 2.25rem; /* 36px */
  --text-3xl: 3rem; /* 48px */
  --text-4xl: 4.5rem; /* 72px */

  --leading-none: 1;
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.7; /* Plus d'air pour la lecture senior */
  --leading-relaxed: 1.9;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* =========================================================================
     ESPACEMENTS & TAILLES
     ========================================================================= */

  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3.5rem; /* 56px - Légèrement augmenté */
  --space-16: 5rem; /* 80px */
  --space-24: 8rem; /* 128px */

  --container-max-width: 1200px;
  --container-padding: var(--space-6);

  /* =========================================================================
     OMBRES & EFFETS PREMIUM 2026
     ========================================================================= */

  --shadow-sm: 0 2px 4px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 10px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 20px 40px -10px rgb(0 0 0 / 0.12);
  --shadow-lux: 0 15px 35px -5px rgba(26, 35, 50, 0.1), 0 5px 15px -2px rgba(213, 63, 140, 0.05);
  --shadow-card: 0 10px 30px rgba(0, 0, 0, 0.04);

  --radius-sm: 0.375rem; /* 6px */
  --radius-md: 0.75rem; /* 12px */
  --radius-lg: 1.5rem; /* 24px - Plus rond, plus premium */

  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 400ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 700ms cubic-bezier(0.4, 0, 0.2, 1);

  --blur-md: 12px;
  --glass-bg: rgba(255, 255, 255, 0.95); /* Plus d'opacité (0.95 au lieu de 0.85) */
  --glass-border: rgba(255, 255, 255, 0.4);
}