/* ─── RISQAI Design System — Tokens ─────────────────────────────────────── */
/* Source de vérité. Ne pas surcharger ces variables dans d'autres fichiers. */

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

:root {
  /* ── Fonts ── */
  --font-heading: 'Sora', sans-serif;
  --font-body:    'Inter', sans-serif;

  /* ── Backgrounds ── */
  --bg:           #F4F4F5;
  --surface:      #FFFFFF;
  --surface-dark: #18181B;

  /* ── Borders ── */
  --border:       #E4E4E7;
  --border-dark:  #27272A;

  /* ── Text ── */
  --text-primary:    #18181B;
  --text-secondary:  #52525B;
  --text-muted:      #71717A;
  --text-on-dark:    #FAFAFA;
  --text-muted-dark: #A1A1AA;

  /* ── Primary (bleu marine) ── */
  --primary:       #1E40AF;
  --primary-hover: #1E3A8A;
  --primary-light: #EFF6FF;
  --primary-mid:   #BFDBFE;

  /* ── States ── */
  --success:       #16A34A;
  --success-light: #F0FDF4;
  --warning:       #D97706;
  --warning-light: #FFFBEB;
  --error:         #DC2626;
  --error-light:   #FEF2F2;
  --info:          #0369A1;
  --info-light:    #F0F9FF;

  /* ── Type scale ── */
  --text-xs:       0.75rem;
  --text-2xs: 0.6875rem;  /* 11px — eyebrow labels */
  --text-sm:       0.875rem;
  --text-base:     1rem;
  --text-lg:       1.125rem;
  --text-xl:       1.25rem;
  --text-2xl:      1.5rem;
  --text-3xl:      1.875rem;
  --text-4xl:      2.25rem;
  --text-5xl:      3rem;
  --text-display:  clamp(2rem, 4.5vw, 3.5rem);
  --text-heading:  clamp(1.4rem, 2.5vw, 2.2rem);

  /* ── Spacing (base 4px) ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.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;

  /* ── Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:   0 8px 24px rgba(0,0,0,.10);
  --shadow-xl:   0 16px 48px rgba(0,0,0,.12);
  --shadow-dark: 0 4px 24px rgba(0,0,0,.40);

  /* ── Transitions ── */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* ── Layout ── */
  --container:  1200px;
  --section-py: var(--space-24);
  --nav-height:   64px;
  --prose-width:  36.25rem;  /* 580px — max-width for readable text */
}

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 100%; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
a { text-decoration: none; color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3, h4, h5 { font-family: var(--font-heading); line-height: 1.2; }

/* ── Fade-in au scroll ── */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .fade-in { transition: none; transform: none; opacity: 1; }
}