/* =============================
 🎨 Styleguide global Snapzone
 Centralise les couleurs, typo
 et tailles utilisées sur tout le site.
============================= */

:root {
  /* 🌈 Palette principale */
  --color-primary: #ffc300;
  --color-primary-dark: #ce9e00;
  --color-primary-light: #ffe066;
  --color-primary-hover: #ffd000;
  --color-background: #132e46;
  --color-surface: #314d66;
  --color-surface-dark: #1e3a52;
  --color-overlay: rgba(23, 55, 83, 0.42);
  --color-text: #f0eff4;
  --color-white: #ffffff;
  --color-black: #000000;

  /* 🎨 Surfaces pour gradients */
  --color-surface-gradient-start: #305577;
  --color-surface-gradient-end: #1d4363;
  --color-header-gradient-start: #345a78;
  --color-header-gradient-end: #2a4a64;
  --color-nav-bg: #27445c;
  --color-guide-gradient-start: #254560;
  --color-guide-gradient-end: #1a3348;

  /* 🎯 Couleurs de difficulté */
  --color-difficulty-easy: #2DB53D;
  --color-difficulty-medium: #F68704;
  --color-difficulty-hard: #F14042;

  /* 🎨 Accent colors */
  --color-success: #22c55e;
  --color-success-dark: #16a34a;
  --color-success-light: #4ade80;
  --color-error: #ef4444;
  --color-info: #0ea5e9;
  --color-info-light: #38bdf8;
  --color-focus: #4a90e2;

  /* ✍️ Typographie */
  --font-family-base: "Gabarito", sans-serif;
  --font-weight-bold: 700;

  /* 🪄 Tailles de texte (mobile-first, responsive) */
  --font-size-xs: clamp(0.75rem, 2vw, 0.85rem);
  --font-size-sm: clamp(0.85rem, 2.2vw, 0.95rem);
  --font-size-base: clamp(1rem, 2.5vw, 1.1rem);
  --font-size-md: clamp(1.1rem, 3vw, 1.25rem);
  --font-size-lg: clamp(1.5rem, 4vw, 1.75rem);
  --font-size-xl: clamp(1.75rem, 5vw, 2.5rem);

  /* 📏 Espacements */
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 2rem;

  /* 🧱 Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* 🌟 Shadows */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-card: 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.1);
  --shadow-elevated: 0 8px 24px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1);

  /* 🪟 Glass effect */
  --glass-bg: rgba(255,255,255,0.05);
  --glass-border: rgba(255,255,255,0.1);

  /* ⚡ Transitions */
  --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* 🖼️ Layout */
  --container-max-width: 1200px;
  --page-padding: clamp(1rem, 4vw, 2rem);
  --page-padding-x: clamp(1rem, 5vw, 2.5rem);
}

/* =============================
 📐 Layout System – Unified containers
 Single source of truth for page layouts
============================= */

/* Page content container (use on <main> elements) */
.page-content {
  width: 100%;
  max-width: var(--container-max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--page-padding);
}

/* Section container (use inside page-content for sections) */
.section-content {
  width: 100%;
  padding: var(--space-md);
}

/* Desktop increases gap between sections */
@media (min-width: 1024px) {
  .page-content {
    gap: var(--space-lg);
  }
}