/* ============================================================
   YSF — Design tokens (variables réutilisables sur toutes les pages)
   Couleurs, typographie, espacements, ombres, rayons, motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ---- Fonts ---- */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  /* ---- Brand blue (primary) ---- */
  --blue-50:#EAF6FD; --blue-100:#CDEAFB; --blue-200:#9DD6F6; --blue-300:#63BEEF;
  --blue-400:#2EA6E8; --blue-500:#1B9FE4; --blue-600:#1380C7; --blue-700:#0F66A0;
  --blue-800:#0C4F7C; --blue-900:#0A3D60;

  /* ---- Accents (gradient tail) ---- */
  --cyan-400:#5BD0F2; --cyan-500:#2BC4F0; --cyan-600:#14A6D6;
  --violet-400:#8E8FD8; --violet-500:#6B71C2; --violet-600:#5B4FA8;
  --magenta-500:#9355AD; --magenta-600:#B43E8E;

  /* ---- Signature gradients ---- */
  --grad-brand: linear-gradient(135deg, #2BC4F0 0%, #1B9FE4 32%, #6B71C2 68%, #B43E8E 100%);
  --grad-brand-soft: linear-gradient(135deg, #5BD0F2 0%, #2EA6E8 45%, #8E8FD8 100%);
  --grad-ink: linear-gradient(160deg, #102A43 0%, #0A1A2E 100%);

  /* ---- Neutrals (cool slate) ---- */
  --white:#FFFFFF; --slate-50:#F6F9FC; --slate-100:#EDF2F8; --slate-200:#DCE5EF;
  --slate-300:#C2CFDF; --slate-400:#93A4BA; --slate-500:#647288; --slate-600:#475467;
  --slate-700:#334155; --slate-800:#1C2A3D; --slate-900:#0F1B2D; --ink-black:#0A1320;

  /* ---- Semantic / scoring ---- */
  --success-50:#E7F8EF; --success-500:#16A34A; --success-600:#128A3E;
  --warning-50:#FEF5E7; --warning-500:#F59E0B; --warning-600:#D97E06;
  --danger-50:#FDECEC; --danger-500:#E11D48; --danger-600:#C01640;

  /* ---- Semantic aliases ---- */
  --text-strong: var(--slate-900);
  --text-body: var(--slate-700);
  --text-muted: var(--slate-500);
  --text-faint: var(--slate-400);
  --surface-page: var(--slate-50);
  --surface-card: var(--white);
  --border-subtle: var(--slate-200);
  --border-default: var(--slate-300);

  /* ---- Type scale ---- */
  --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem;
  --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.25rem; --text-4xl:3rem;

  /* ---- Spacing (4px grid) ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem;

  /* ---- Layout ---- */
  --container-max:1200px; --container-wide:1320px;
  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radii ---- */
  --radius-xs:4px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px;
  --radius-xl:22px; --radius-2xl:30px; --radius-pill:999px;

  /* ---- Shadows ---- */
  --shadow-sm: 0 2px 6px rgba(15,27,45,.07);
  --shadow-md: 0 6px 18px rgba(15,27,45,.08);
  --shadow-lg: 0 16px 40px rgba(15,27,45,.10);
  --shadow-xl: 0 28px 70px rgba(15,27,45,.14);
  --shadow-ring: 0 0 0 4px rgba(27,159,228,.22);
  --shadow-glow: 0 10px 36px rgba(27,159,228,.32);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --dur-fast:140ms; --dur-base:220ms;
}