/* =========================================================================
   CTS — Variables CSS (charte officielle)
   -------------------------------------------------------------------------
   Palette fournie par le client (Canva, 2026-04-24) :
   - #203763 bleu nuit (primaire foncé)
   - #244d86 bleu marine (primaire)
   - #2c6cb3 bleu moyen
   - #137cf4 bleu vif (accent action / CTA)
   - #b5fff8 cyan menthe (accent décoratif)

   Direction visuelle : épuré, moderne, élégant, corporate. Cartes arrondies,
   ombres soft, typographie Plus Jakarta Sans (titres) + Inter (body).
   ========================================================================= */

:root {
  /* ------ Couleurs charte ------ */
  --cts-color-marine-deep: #203763;
  --cts-color-marine: #244d86;
  --cts-color-marine-soft: #2c6cb3;
  --cts-color-accent: #137cf4;
  --cts-color-accent-hover: #0f63c4;
  --cts-color-mint: #b5fff8;
  --cts-color-mint-soft: #e0fbf7;

  /* ------ Aliases sémantiques ------ */
  --cts-color-primary: var(--cts-color-marine);
  --cts-color-primary-deep: var(--cts-color-marine-deep);
  --cts-color-primary-soft: var(--cts-color-marine-soft);
  --cts-color-cta: var(--cts-color-accent);
  --cts-color-cta-hover: var(--cts-color-accent-hover);

  /* ------ Neutres ------ */
  --cts-color-text: #0f1623;
  --cts-color-text-muted: #5a6478;
  --cts-color-text-subtle: #8a93a3;
  --cts-color-bg: #ffffff;
  --cts-color-bg-subtle: #f6f8fb;
  --cts-color-bg-deep: var(--cts-color-marine-deep);
  --cts-color-border: #e1e6ee;
  --cts-color-border-strong: #c8d0dc;

  /* ------ États ------ */
  --cts-color-error: #c12626;
  --cts-color-error-bg: #fdecec;
  --cts-color-success: #0f7a3f;
  --cts-color-success-bg: #e6f5ec;
  --cts-color-warning: #b86e0a;
  --cts-color-warning-bg: #fdf3e3;

  /* Tokens dédiés UX de validation formulaire
     (astérisque obligatoire, bordures et fonds d'erreur).
     Contraste vérifié ≥ 3:1 sur fond blanc pour --cts-color-danger. */
  --cts-color-danger: #c8102e;
  --cts-color-danger-bg: #fdecea;
  --cts-color-danger-border: #e57373;

  /* ------ Gradients ------ */
  --cts-gradient-hero: linear-gradient(135deg, #203763 0%, #244d86 60%, #2c6cb3 100%);
  --cts-gradient-accent: linear-gradient(135deg, #137cf4 0%, #2c6cb3 100%);
  --cts-gradient-mint: linear-gradient(135deg, #b5fff8 0%, #e0fbf7 100%);

  /* ------ Typographie ------ */
  --cts-font-display: 'Plus Jakarta Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --cts-font-body: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  --cts-font-size-xs: 12px;
  --cts-font-size-sm: 14px;
  --cts-font-size-base: 16px;
  --cts-font-size-lg: 18px;
  --cts-font-size-xl: 22px;
  --cts-font-size-2xl: 28px;
  --cts-font-size-3xl: 36px;
  --cts-font-size-4xl: 48px;
  --cts-font-size-5xl: 64px;

  --cts-line-height-tight: 1.15;
  --cts-line-height-snug: 1.3;
  --cts-line-height-base: 1.5;
  --cts-line-height-relaxed: 1.65;

  --cts-letter-spacing-tight: -0.02em;
  --cts-letter-spacing-base: 0;
  --cts-letter-spacing-wide: 0.04em;

  /* ------ Espacements ------ */
  --cts-space-1: 4px;
  --cts-space-2: 8px;
  --cts-space-3: 12px;
  --cts-space-4: 16px;
  --cts-space-5: 20px;
  --cts-space-6: 24px;
  --cts-space-8: 32px;
  --cts-space-10: 40px;
  --cts-space-12: 48px;
  --cts-space-16: 64px;
  --cts-space-20: 80px;
  --cts-space-24: 96px;

  /* ------ Radius ------ */
  --cts-radius-xs: 4px;
  --cts-radius-sm: 8px;
  --cts-radius-md: 12px;
  --cts-radius-lg: 16px;
  --cts-radius-xl: 24px;
  --cts-radius-pill: 999px;

  /* ------ Ombres ------ */
  --cts-shadow-xs: 0 1px 2px rgba(32, 55, 99, 0.05);
  --cts-shadow-sm: 0 2px 4px rgba(32, 55, 99, 0.06);
  --cts-shadow-md: 0 8px 24px rgba(32, 55, 99, 0.10);
  --cts-shadow-lg: 0 16px 40px rgba(32, 55, 99, 0.14);
  --cts-shadow-focus: 0 0 0 3px rgba(19, 124, 244, 0.25);

  /* ------ Layout ------ */
  --cts-content-max: 1240px;
  --cts-sidebar-width: 280px;
  --cts-header-height: 72px;

  /* ------ Transitions ------ */
  --cts-transition-fast: 120ms ease;
  --cts-transition-base: 200ms ease;
  --cts-transition-slow: 320ms ease;

  /* ------ Z-index ------ */
  --cts-z-dropdown: 50;
  --cts-z-sticky: 100;
  --cts-z-overlay: 200;
  --cts-z-modal: 300;
}