/* ═══════════════════════════════════════════════════════════════════════
 * getfishnet — spacing, radius, shadows, motion, containers
 * Strict 4-point grid. Soft shadows only. Radius 6/10/14/20/28.
 * ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Spacing (4-pt grid) ─── */
  --space-0: 0;     --space-1: 4px;   --space-2: 8px;   --space-3: 12px;
  --space-4: 16px;  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --space-24: 96px; --space-32: 128px;--space-40: 160px;

  /* ─── Radius — soft but precise ─── */
  --radius-sm:   6px;     /* badges, tags */
  --radius-md:   10px;    /* buttons, inputs */
  --radius-lg:   14px;    /* cards */
  --radius-xl:   20px;    /* sections, panels */
  --radius-2xl:  28px;    /* hero blocks */
  --radius-full: 9999px;  /* pills, avatars */

  /* ─── Shadows — soft only, no hard 2D ─── */
  --shadow-xs: 0 1px 2px 0 rgb(15 23 42 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 6px -1px rgb(15 23 42 / 0.05);
  --shadow-lg: 0 12px 28px -8px rgb(15 23 42 / 0.12), 0 4px 10px -2px rgb(15 23 42 / 0.06);
  --shadow-xl: 0 24px 48px -12px rgb(15 23 42 / 0.16), 0 8px 16px -4px rgb(15 23 42 / 0.08);
  --shadow-glow-green: 0 0 0 4px rgb(85 184 139 / 0.18);
  --shadow-glow-navy:  0 0 0 4px rgb(24 43 65 / 0.14);

  /* ─── Motion — easings + durations ─── */
  --easing-standard:   cubic-bezier(0.4, 0, 0.2, 1);  /* @kind other */
  --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);    /* @kind other */
  --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);    /* @kind other */
  --easing-spring:     cubic-bezier(0.5, 1.5, 0.5, 1);  /* @kind other */
  --duration-instant: 80ms;   /* @kind other */
  --duration-fast:    160ms;  /* @kind other */
  --duration-base:    220ms;  /* @kind other */
  --duration-slow:    320ms;  /* @kind other */
  --duration-xslow:   500ms;  /* @kind other */

  /* ─── Containers — three widths that ALTERNATE for rhythm ─── */
  --container-read:    840px;   /* long reading: méthode, FAQ, rapport, manifeste */
  --container-content: 1200px;  /* standard content max */
  --container-2xl:     1440px;  /* wide hero, deep bands */
  --container-sm:      640px;
  --container-md:      768px;
  --container-lg:      1024px;
  --container-xl:      1280px;

  /* ─── Breakpoints (reference) ─── */
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* ─── Reduced motion — collapse durations ─── */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0.01ms; /* @kind other */
    --duration-fast: 0.01ms;    /* @kind other */
    --duration-base: 0.01ms;    /* @kind other */
    --duration-slow: 0.01ms;    /* @kind other */
    --duration-xslow: 0.01ms;   /* @kind other */
  }
}