/* PIMMO Design System — tokens (colors, typography, spacing, radius,
   elevation, motion), rapatriés depuis le projet Claude Design
   « pimmo-design-system-c0b10c9a ». Source de vérité du design du site. */

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

:root {
  /* ---------- colors : rampe bleue de marque ---------- */
  --pimmo-blue-700: #27406B;
  --pimmo-blue-500: #4C7EDE;
  --pimmo-blue-300: #9DC2F0;
  --pimmo-blue-200: #C9D8EE;
  --pimmo-blue-100: #D8E2F0;
  --pimmo-blue-050: #E1E9F5;
  --pimmo-blue-025: #F4F7FC;

  --pimmo-sky-1: #F2F6FC;
  --pimmo-sky-2: #E9EFF8;
  --pimmo-sky-3: #E3EBF7;

  --pimmo-paper: #FDFEFF;
  --pimmo-slate-500: #6B82A6;
  --pimmo-slate-400: #8FA0BC;

  --pimmo-danger-600: #8E3630;
  --pimmo-danger-500: #B84A45;
  --pimmo-danger-100: #E7C6C3;
  --pimmo-danger-025: #FBF0EF;
  --pimmo-warn-500:   #B8792B;

  --pimmo-blue-150: #DDE6F4;
  --pimmo-blue-075: #E7EDF6;
  --pimmo-blue-tint: #EDF3FC;
  --pimmo-desk:     #DFE7F2;

  --pimmo-disabled: #B7C2D4;
  --pimmo-disabled-press: #9AA6BC;

  /* alias sémantiques */
  --color-primary: var(--pimmo-blue-500);
  --color-primary-strong: var(--pimmo-blue-700);
  --color-accent: var(--pimmo-blue-300);

  --text-strong: var(--pimmo-blue-700);
  --text-body: var(--pimmo-blue-700);
  --text-muted: var(--pimmo-slate-500);
  --text-subtle: var(--pimmo-slate-400);
  --text-on-primary: var(--pimmo-paper);
  --text-disabled: #B4C2D8;

  --text-danger: var(--pimmo-danger-600);
  --icon-danger: var(--pimmo-danger-500);
  --border-danger: var(--pimmo-danger-100);
  --surface-danger: var(--pimmo-danger-025);
  --text-warn: var(--pimmo-warn-500);

  --surface-page: var(--pimmo-sky-2);
  --surface-card: var(--pimmo-paper);
  --surface-sunken: var(--pimmo-blue-025);

  --border-default: var(--pimmo-blue-200);
  --border-strong: var(--pimmo-blue-300);
  --border-subtle: var(--pimmo-blue-050);
  --divider: var(--pimmo-blue-100);

  --focus-ring: rgba(157, 194, 240, 0.35);

  --press-primary: var(--pimmo-blue-700);
  --press-secondary: var(--pimmo-blue-200);
  --press-secondary-hover: var(--pimmo-blue-300);

  --gradient-page: linear-gradient(180deg, var(--pimmo-sky-1) 0%, var(--pimmo-sky-2) 45%, var(--pimmo-sky-3) 100%);
  --gradient-accent: linear-gradient(90deg, var(--pimmo-blue-500) 0%, var(--pimmo-blue-300) 50%, var(--pimmo-blue-500) 100%);

  /* ---------- typography ---------- */
  --font-sans: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --text-xs: 11px;
  --text-sm: 12.5px;
  --text-caption: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 20px;
  --text-xl: 26px;
  --text-2xl: 38px;
  --text-3xl: 52px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;

  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wordmark: 0.16em;
  --tracking-eyebrow: 0.2em;
  --tracking-label: 0.22em;

  /* ---------- spacing ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;
  --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-18: 72px;
  --card-pad: clamp(20px, 4vw, 32px);
  --content-max: 480px;
  --gap-stack: 14px;

  /* ---------- radius ---------- */
  --radius-2xs: 6px;
  --radius-xs: 10px;
  --radius-sm: 12px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;

  /* ---------- elevation ---------- */
  --shadow-card: 0 1px 3px rgba(39, 64, 107, 0.08);
  --shadow-card-hover: 0 4px 14px rgba(39, 64, 107, 0.14);
  --shadow-raised: 0 6px 18px rgba(76, 126, 222, 0.35);

  --push-primary: 0 4px 0 var(--press-primary);
  --push-primary-hover: 0 5px 0 var(--press-primary);
  --push-secondary: 0 3px 0 var(--press-secondary);
  --push-secondary-hover: 0 3px 0 var(--press-secondary-hover);
  --push-flat: 0 0 0 var(--press-primary);

  --ring-focus: 0 0 0 3px var(--focus-ring);

  /* ---------- motion ---------- */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-slide: cubic-bezier(0.5, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: ease-in;

  --dur-instant: 0.12s;
  --dur-fast: 0.15s;
  --dur-med: 0.35s;
  --dur-slow: 0.5s;
  --dur-entrance: 0.6s;
}

/* keyframes livrées avec le design system */
@keyframes pimmo-fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pimmo-maskWipe { from { clip-path: inset(-10% 100% -10% 0); } to { clip-path: inset(-10% -5% -10% 0); } }
@keyframes pimmo-gradientPan { from { background-position: 0% 50%; } to { background-position: 200% 50%; } }
@keyframes pimmo-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }