/* ==========================================================================
   CIDEF — Design tokens
   Référence : DESIGN-SYSTEM.md v1.0
   Ces variables sont la source unique de vérité. Aucun hex en dur ailleurs.
   ========================================================================== */

:root {
  /* --- Marque ----------------------------------------------------------- */
  --color-primary: #00823e;
  --color-primary-dark: #00662f; /* hover / pressed */
  --color-primary-darker: #004f24; /* footer bas, overlays */
  --color-primary-soft: #f1f7f3; /* fond de section très léger */
  --color-secondary: #e22319;
  --color-accent: #fbd11a;

  /* --- Neutres ---------------------------------------------------------- */
  --color-black: #000000;
  --color-heading: #1a1a1a;
  --color-text: #333333;
  --color-muted: #666666;
  --color-disabled: #999999;
  --color-border-strong: #cccccc;
  --color-border: #e5e5e5;
  --color-surface: #f5f5f5;
  --color-surface-light: #fafafa;
  --color-white: #ffffff;

  /* Anneau de focus. Redéfini sur les surfaces colorées, où le vert de marque
     se confondrait avec le fond. */
  --color-focus: var(--color-primary);

  /* --- Typographie ------------------------------------------------------ */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-h1: 3.5rem;    /* 56px */
  --text-h2: 2.5rem;    /* 40px */
  --text-h3: 1.75rem;   /* 28px */
  --text-h4: 1.375rem;  /* 22px */
  --text-h5: 1.125rem;  /* 18px */
  --text-lead: 1.25rem; /* 20px */
  --text-body: 1.0625rem; /* 17px */
  --text-small: 0.9375rem; /* 15px */
  --text-caption: 0.875rem; /* 14px */
  --text-button: 1rem;  /* 16px */

  /* --- Layout ----------------------------------------------------------- */
  --container-width: 1280px;
  --container-inner: 1240px;
  --page-gutter: 24px;

  /* --- Rayons ----------------------------------------------------------- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* --- Espacements (base 8) --------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;
  --space-10: 80px;
  --space-11: 96px;
  --space-12: 120px;

  /* Rythme vertical entre grandes sections */
  --section-y: 96px;

  /* --- Ombres (discrètes) ----------------------------------------------- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-menu: 0 12px 32px rgba(0, 0, 0, 0.12);

  /* --- Transitions ------------------------------------------------------ */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 200ms;

  /* --- Couches ---------------------------------------------------------- */
  --z-base: 0;
  --z-sticky: 40;
  --z-header: 100;
  --z-overlay: 1000;
}

/* Échelle responsive ------------------------------------------------------ */
@media (max-width: 1023px) {
  :root {
    --text-h1: 2.75rem;  /* 44px */
    --text-h2: 2.125rem; /* 34px */
    --text-h3: 1.5rem;   /* 24px */
    --text-h4: 1.25rem;  /* 20px */
    --text-body: 1rem;   /* 16px */
    --text-small: 0.875rem;
    --page-gutter: 20px;
    --section-y: 72px;
  }
}

@media (max-width: 767px) {
  :root {
    --text-h1: 2.125rem; /* 34px */
    --text-h2: 1.75rem;  /* 28px */
    --text-h3: 1.375rem; /* 22px */
    --text-h4: 1.125rem; /* 18px */
    --page-gutter: 20px;
    --section-y: 56px;
  }
}