/**
 * Déclic Impact — Design tokens (variables only).
 * Single source for colors, fonts, spacing. No layout.
 */

:root {
  /* Colors — brand */
  --navy: #1a2340;
  --navy-dark: #0d1525;
  --orange: #e8601c;
  --orange-light: #f4a05a;
  --orange-hover: #c9511a;
  --cream: #f5f0eb;
  --white: #ffffff;

  /* Colors — text */
  --text-dark: #1a2340;
  --text-mid: #4a5568;
  --placeholder: #aaaaaa;

  /* Colors — UI */
  --border-form: rgba(26, 35, 64, 0.2);
  --nav-bg: rgba(13, 21, 37, 0.92);
  --nav-border: rgba(232, 96, 28, 0.25);
  --nav-link: rgba(255, 255, 255, 0.75);
  --hero-gradient-orange: rgba(232, 96, 28, 0.18);
  --hero-gradient-navy: rgba(26, 35, 64, 0.8);
  --badge-border: rgba(232, 96, 28, 0.5);
  --text-on-dark: rgba(255, 255, 255, 0.7);
  --text-on-dark-muted: rgba(255, 255, 255, 0.55);
  --text-on-dark-strong: rgba(255, 255, 255, 0.8);
  --exp-border: rgba(232, 96, 28, 0.3);
  --citation-overlay: rgba(10, 22, 40, 0.55);
  --approche-num: rgba(26, 35, 64, 0.1);
  --card-border: rgba(255, 255, 255, 0.12);
  --card-bg: rgba(255, 255, 255, 0.07);
  --btn-outline-hover: rgba(232, 96, 28, 0.15);
  --footer-border: rgba(255, 255, 255, 0.08);
  --footer-text: rgba(255, 255, 255, 0.35);
  --footer-logo: rgba(255, 255, 255, 0.5);
  --info-box-bg: var(--navy-dark);
  --info-box-label: rgba(255, 255, 255, 0.45);
  --info-box-value: rgba(255, 255, 255, 0.6);
  --hero-photo-gradient: #2a3a5c;
  --admin-error: #c53030;
  --admin-success: #276749;

  /* SVG / gradients (for use in CSS or inline) */
  --svg-mtn1-start: #e8601c;
  --svg-mtn1-end: #1a2340;
  --svg-mtn2-start: #f4a05a;
  --svg-mtn2-end: #0d1525;
  --svg-ridge: #0d1525;

  /* Typography */
  --font-sans: 'Barlow', sans-serif;
  --font-serif: 'Cormorant Garamond', serif;

  /* Spacing */
  --section-padding: 100px 5%;
  --nav-height: 64px;
  --nav-padding-x: 5%;
  --content-max: 680px;
  --divider-width: 48px;
  --divider-height: 2px;
}