/* ==========================================================================
   CDD Informatique — design tokens (brand "Héritage", since 1994)
   Import once at the root of the site. All UI colours must come from here.
   ========================================================================== */

:root {
  /* ---- Brand colours ---- */
  --cdd-green-500: #029440;   /* Brand green. Logo, large fills, icons, large text only (3.95:1 on white) */
  --cdd-green-600: #017F37;   /* Interactive: buttons, links, focus (5.13:1 with white) */
  --cdd-green-700: #016B2E;   /* Hover/pressed, green text, dark sections, footer (6.68:1 with white) */
  --cdd-green-100: #CDEBD9;   /* Subtle text/lines on green-700 only */
  --cdd-green-50:  #E7F4EC;   /* Soft backgrounds, icon chips, highlights */
  --cdd-red-500:   #E11F26;   /* Accent (the "c" block). Max ~5 % of any screen */
  --cdd-red-600:   #C8191F;   /* Red used as text or small UI (5.81:1 on white) */

  /* ---- Neutrals (no pure black anywhere) ---- */
  --cdd-ink:    #1E2B23;      /* Body text, headings */
  --cdd-muted:  #5B6B60;      /* Secondary text, captions */
  --cdd-line:   #DCE3DD;      /* Borders, dividers */
  --cdd-paper:  #F6F8F5;      /* Alternate section background */
  --cdd-white:  #FFFFFF;      /* Main background */

  /* ---- Semantic aliases ---- */
  --color-bg: var(--cdd-white);
  --color-bg-alt: var(--cdd-paper);
  --color-bg-soft: var(--cdd-green-50);
  --color-bg-inverse: var(--cdd-green-700);
  --color-text: var(--cdd-ink);
  --color-text-muted: var(--cdd-muted);
  --color-text-inverse: var(--cdd-white);
  --color-border: var(--cdd-line);
  --color-primary: var(--cdd-green-600);
  --color-primary-hover: var(--cdd-green-700);
  --color-brand: var(--cdd-green-500);
  --color-accent: var(--cdd-red-500);
  --color-focus: var(--cdd-green-600);

  /* ---- Typography (single family: Archivo) ---- */
  --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --fs-display: clamp(2.5rem, 1.6rem + 3.6vw, 3.75rem);  /* 40 → 60px, hero H1 */
  --fs-h2: clamp(1.875rem, 1.4rem + 1.9vw, 2.5rem);      /* 30 → 40px */
  --fs-h3: 1.5rem;                                       /* 24px */
  --fs-h4: 1.1875rem;                                    /* 19px, card titles */
  --fs-lead: 1.125rem;                                   /* 18px */
  --fs-body: 1rem;                                       /* 16px */
  --fs-small: 0.875rem;                                  /* 14px */
  --fs-eyebrow: 0.8125rem;                               /* 13px, CAPS */

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.6;
  --ls-eyebrow: 0.24em;
  --ls-wordmark: 0.24em;

  /* ---- Spacing (8px base) ---- */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4.5rem;   /* 72 */
  --space-9: 6rem;     /* 96 */

  /* ---- Layout ---- */
  --container-max: 1296px;          /* 1440 artboard − 2 × 72px gutters */
  --gutter: clamp(1rem, 5vw, 4.5rem);
  --header-height: 84px;

  /* ---- Shape & depth ---- */
  --radius-sm: 6px;    /* buttons, inputs */
  --radius-md: 10px;   /* icon chips */
  --radius-lg: 14px;   /* large media */
  --radius-icon: 22%;  /* app icon / favicon tile */
  --shadow-sm: 0 1px 2px rgba(30, 43, 35, 0.06);
  --shadow-md: 0 18px 40px rgba(30, 43, 35, 0.14), 0 2px 6px rgba(30, 43, 35, 0.08);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 150ms;
  --dur-base: 240ms;
}

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