/* ==========================================================================
   FOCUS — Design tokens
   Source de vérité : Claude Design/design_handoff_focus_site/tokens/*.css
   Ne pas coder de valeur en dur ailleurs : tout passe par ces variables.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

:root {
  /* --- Palette de base ---------------------------------------------------- */
  --violet: #8400FF;        /* Violet électrique — action, accents */
  --lime: #DEF835;          /* Jaune lime — impact, highlights */
  --black: #0B0B0D;         /* Noir profond — fond principal */
  --white: #FFFFFF;
  --violet-deep: #5A00B0;   /* hover du violet */
  --lime-deep: #C4DE1F;     /* hover du lime */
  --grey-1: #17171B;        /* surface carte */
  --grey-2: #232329;        /* surface élevée */
  --grey-3: #6E6E78;        /* texte tertiaire */
  --grey-4: #B4B4BC;        /* texte secondaire */

  /* --- Sémantique --------------------------------------------------------- */
  --bg-page: var(--black);
  --surface-card: var(--grey-1);
  --surface-raised: var(--grey-2);
  --border-subtle: #2A2A31;
  --border-strong: #3A3A44;
  --text-primary: var(--white);
  --text-secondary: var(--grey-4);
  --text-tertiary: var(--grey-3);
  --text-on-violet: var(--white);
  --text-on-lime: var(--black);
  --accent: var(--violet);
  --accent-alt: var(--lime);
  --focus-ring: 0 0 0 3px rgba(132, 0, 255, 0.45);

  /* --- Typographie -------------------------------------------------------- */
  --font-display: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-body: 'Poppins', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --text-hero: 900 64px/1.05 var(--font-display);
  --text-h1: 900 44px/1.1 var(--font-display);
  --text-h2: 900 30px/1.15 var(--font-display);
  --text-h3: 800 20px/1.25 var(--font-display);
  --text-card-title: 900 19px/1.2 var(--font-display);
  --text-body: 400 15px/1.6 var(--font-body);
  --text-body-sm: 400 13px/1.55 var(--font-body);
  --text-label: 700 11px/1 var(--font-body);
  --text-stat: 900 40px/1 var(--font-display);
  --tracking-label: 0.08em;
  --tracking-display: -0.01em;

  /* --- Espacements (base 4) ----------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  /* --- Rayons ------------------------------------------------------------- */
  --radius-sm: 6px;     /* badges */
  --radius-md: 10px;    /* boutons, inputs */
  --radius-lg: 14px;    /* cartes */
  --radius-pill: 999px; /* chips, labels */

  /* --- Élévation / glow --------------------------------------------------- */
  --glow-violet: 0 0 32px rgba(132, 0, 255, 0.35);
  --glow-lime: 0 0 32px rgba(222, 248, 53, 0.25);
  --shadow-card: 0 8px 28px rgba(0, 0, 0, 0.55);

  /* --- Motion ------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-med: 260ms;

  /* --- Layout ------------------------------------------------------------- */
  --container: 1200px;
  --gutter: var(--sp-7);   /* 48px — padding horizontal des sections */
  --nav-height: 70px;      /* offset des ancres (nav sticky) */
}

@media (max-width: 720px) {
  :root { --gutter: var(--sp-5); }
}