/* ============================================================================
   BoostMyPresta — Design tokens V9
   ----------------------------------------------------------------------------
   Vert turquoise Modal-style + palette élargie (cream/blue/pink/yellow/orange)
   + Geist Sans/Mono + spacing Modal/Linear inspiré
   ============================================================================ */

:root {
  /* ====== BACKGROUNDS — DARK (default) ====== */
  --bg: #08080A;
  --carbon: #08080A;
  --graphite: #131316;
  --graphite-2: #1A1A1F;
  --graphite-3: #22222A;

  /* ====== LINES ====== */
  --line: rgba(255, 255, 255, 0.06);
  --line-2: rgba(255, 255, 255, 0.10);
  --line-3: rgba(255, 255, 255, 0.18);

  /* Header sticky background (adaptable) */
  --bg-header: rgba(8, 8, 10, 0.78);

  /* ====== TEXT ====== */
  --fg: #FAFAFA;
  --fg-soft: #C8C8CC;
  --fg-muted: #888892;
  --fg-faint: #5C5C66;

  /* ====== ACCENT — Vert turquoise unique ====== */
  --green: #7FEE64;
  --green-bright: #9FFF7E;
  --green-deep: #5FD93F;
  --green-soft: rgba(127, 238, 100, 0.10);
  --green-glow: rgba(127, 238, 100, 0.25);
  --on-green: #051A00;

  /* ====== PALETTE ÉLARGIE — couleurs surprenantes (blocs spécifiques) ====== */
  --neon-yellow: #DEFF00;
  --neon-yellow-ink: #0A0F00;
  --soft-lime: #E8F2C9;
  --soft-lime-ink: #1A2200;
  --pastel-blue: #C8D8FF;
  --pastel-blue-ink: #0A1A3F;
  --pastel-pink: #FFD4E6;
  --pastel-pink-ink: #3F0A22;
  --hot-orange: #FF5E1F;
  --hot-orange-ink: #1F0700;
  --cream: #F5F1E8;
  --cream-ink: #1A1610;
  --sage: #D8EAB8;
  --sage-ink: #162200;
  --ice-mint: #C8F0E5;
  --ice-mint-ink: #001F19;

  /* ====== TYPO ====== */
  --font-sans: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  /* ====== RADIUS ====== */
  --r-xs: 3px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 20px;
  --r-pill: 100px;

  /* ====== SPACING ====== */
  --container: 1280px;
  --gutter: 32px;

  /* ====== EASING ====== */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* ====== SHADOWS ====== */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.50);
  --shadow-glow: 0 0 100px rgba(127, 238, 100, 0.08);
  --shadow-cta: 0 8px 24px rgba(127, 238, 100, 0.25);
}

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg);
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 400; line-height: 1.5;
  letter-spacing: -0.011em; overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: 0; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
img, svg, video { display: block; max-width: 100%; }
input, textarea, select { font: inherit; color: inherit; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-sans); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; color: var(--fg); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ============================================================================
   LIGHT MODE — [data-theme="light"]
   Active via toggle dans le header. Persiste dans localStorage 'bmp-theme'.
   ============================================================================ */
[data-theme="light"] {
  --bg: #FAFAFA;
  --carbon: #FAFAFA;
  --graphite: #F2F2F2;
  --graphite-2: #E8E8E8;
  --graphite-3: #DCDCDC;

  --line: rgba(0, 0, 0, 0.08);
  --line-2: rgba(0, 0, 0, 0.12);
  --line-3: rgba(0, 0, 0, 0.20);

  /* Header background light */
  --bg-header: rgba(250, 250, 250, 0.85);

  --fg: #08080A;
  --fg-soft: #2A2A2E;
  --fg-muted: #5C5C66;
  --fg-faint: #888892;

  /* Accent vert reste identique (lisible sur les deux modes) */
  --green: #5FD93F;
  --green-bright: #7FEE64;
  --green-deep: #3A8523;
  --green-shadow: #1F4F12;
  --green-soft: rgba(95, 217, 63, 0.12);
  --green-glow: rgba(95, 217, 63, 0.20);
  --on-green: #051A00;

  /* Shadows ajustés pour fond clair */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-glow: 0 0 80px rgba(95, 217, 63, 0.10);
  --shadow-cta: 0 8px 24px rgba(95, 217, 63, 0.30);
}

/* Empêcher le flash au chargement : opacity 0 jusqu'à ce que le theme soit appliqué */
html[data-theme-loading] body { opacity: 0; }
html { transition: background-color 200ms var(--ease); }
body { transition: background-color 200ms var(--ease), color 200ms var(--ease); }