/* ==========================================================================
   RIMCOM — Design tokens
   Source unique des couleurs, typographies et espacements de la charte.
   Ne jamais dupliquer ces valeurs ailleurs : toujours référencer les
   variables ci-dessous.
   ========================================================================== */

:root {
  /* Couleurs de marque (charte §5) */
  --rimcom-night-violet: #150026;
  --rimcom-signal-blue: #5394EA;
  --rimcom-stage-magenta: #F107FC;
  --rimcom-ink: #3B3348;
  --rimcom-grey-mauve: #8B7FA0;
  --rimcom-line: #E2DEE8;
  --rimcom-pearl: #F7F5FA;
  --rimcom-white: #FFFFFF;
  --rimcom-gradient: linear-gradient(135deg, #5394EA 0%, #A24BF6 52%, #F107FC 100%);

  /* Rôles sémantiques (pour ne jamais coder une couleur de marque en dur) */
  --color-bg: var(--rimcom-white);
  --color-bg-alt: var(--rimcom-pearl);
  --color-bg-dark: var(--rimcom-night-violet);
  --color-text: var(--rimcom-ink);
  --color-text-muted: var(--rimcom-grey-mauve);
  --color-text-on-dark: var(--rimcom-white);
  --color-text-on-dark-muted: #C9BFDA;
  --color-border: var(--rimcom-line);
  --color-border-on-dark: rgba(255, 255, 255, 0.16);
  --color-accent-blue: var(--rimcom-signal-blue);
  --color-accent-magenta: var(--rimcom-stage-magenta);
  --color-focus: var(--rimcom-signal-blue);

  /* Typographie (charte §5) */
  --font-display: 'Poppins', 'Segoe UI', -apple-system, sans-serif;
  --font-body: 'IBM Plex Sans', 'Segoe UI', -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Consolas', 'SFMono-Regular', monospace;

  --fs-eyebrow: 0.8125rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-h4: 1.375rem;
  --fs-h3: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 4vw, 4.5rem);
  --fs-stat: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);

  --lh-tight: 1.1;
  --lh-heading: 1.2;
  --lh-body: 1.6;

  /* Espacements — échelle 8pt */
  --space-1: 0.5rem;
  --space-2: 0.75rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
  --space-8: 6rem;
  --space-9: 8rem;

  --container-max: 1320px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  --radius-sm: 4px;
  --radius-md: 8px;

  --shadow-card: 0 12px 32px -16px rgba(21, 0, 38, 0.24);

  --transition-fast: 160ms ease;
  --transition-base: 320ms cubic-bezier(0.2, 0.7, 0.3, 1);

  --header-height: 132px;
  --header-height-compact: 100px;

  /* Chevron — un seul détail architectural, jamais un motif répété (§5) */
  --chevron-clip: polygon(0 0, 60% 0, 100% 50%, 60% 100%, 0 100%, 40% 50%);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0ms;
    --transition-base: 0ms;
  }
}