/* ============================================================
   EXIMIUS REA — Design Tokens
   Système de design dérivé de la marque (logo Looka + brochure 2026-04)
   « We shape your needs! »

   Source de vérité unique pour le futur site.
   - Couleurs marque exactes : rouge logo #A3150C (arc), noir #000000.
   - Bleu : couleur du modèle de présentation, calée ici pour le web.
   - Vert : registre RSE / entreprise à mission.
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. COULEURS — Neutres (encre / papier)
     ---------------------------------------------------------- */
  --c-ink-900: #11181f; /* texte principal */
  --c-ink-700: #2b3640;
  --c-ink-500: #5a6a78; /* texte secondaire / muted */
  --c-ink-300: #9aa8b4;
  --c-ink-200: #c8d2da;
  --c-ink-100: #e6ebef; /* bordures hairline */
  --c-paper:   #ffffff;
  --c-paper-2: #f4f7fa; /* fond de section discret */
  --c-paper-3: #eaf2f8; /* fond teinté bleu très clair */

  /* ----------------------------------------------------------
     2. COULEURS — Bleu (primaire / institutionnel, confiance)
     Calé sur le bleu de la brochure ; échelle harmonisée.
     ---------------------------------------------------------- */
  --c-blue-50:  #eaf2f8;
  --c-blue-100: #cfe0ee;
  --c-blue-200: #a6c6dd;
  --c-blue-300: #6fa0c2;
  --c-blue-400: #3f7ba3;
  --c-blue-500: #235e8a; /* ← PRIMAIRE */
  --c-blue-600: #1c4f76;
  --c-blue-700: #163f5e;
  --c-blue-800: #102f47;
  --c-blue-900: #0b2233;

  /* ----------------------------------------------------------
     3. COULEURS — Rouge signature (arc du logo)
     Usage parcimonieux : accent, soulignés, CTA d'emphase.
     Valeur exacte du vecteur logo = #A3150C (réf. Looka #991B07).
     ---------------------------------------------------------- */
  --c-red-100: #f6dad7;
  --c-red-500: #a3150c; /* ← ACCENT SIGNATURE */
  --c-red-600: #851009;

  /* ----------------------------------------------------------
     4. COULEURS — Vert RSE (entreprise à mission / durable)
     ---------------------------------------------------------- */
  --c-green-100: #dfefe2;
  --c-green-500: #3f8f4e;
  --c-green-600: #2f6e3c;
  --c-lime-500:  #8fb43a; /* accent frais (domaine Formation) */

  /* ----------------------------------------------------------
     5. COULEURS — Accents par domaine d'intervention
     (reprend le code couleur des 4 domaines de la brochure)
     ---------------------------------------------------------- */
  --c-domain-immo:      var(--c-blue-500);  /* 1. Immobilier & AMO */
  --c-domain-innov:     #2d8bb5;            /* 2. Innovation & IA   */
  --c-domain-finance:   var(--c-green-500); /* 3. Dév. éco & montages */
  --c-domain-formation: var(--c-lime-500);  /* 4. Formation         */
  --c-purple-500:       #7e4e9e;            /* phase Gestion du patrimoine */

  /* ----------------------------------------------------------
     6. COULEURS — Sémantique
     ---------------------------------------------------------- */
  --c-text:        var(--c-ink-900);
  --c-text-muted:  var(--c-ink-500);
  --c-text-invert: var(--c-paper);
  --c-bg:          var(--c-paper);
  --c-bg-alt:      var(--c-paper-2);
  --c-primary:     var(--c-blue-500);
  --c-primary-dk:  var(--c-blue-700);
  --c-accent:      var(--c-red-500);
  --c-link:        var(--c-blue-600);
  --c-border:      var(--c-ink-100);
  --c-focus:       var(--c-blue-400);

  /* États (utilitaires) */
  --c-success: var(--c-green-500);
  --c-warning: #C77A1A;
  --c-danger:  var(--c-red-500);

  /* ----------------------------------------------------------
     7. TYPOGRAPHIE
     Display = Montserrat (géométrique, écho au logo « Renogare »)
     Texte   = Inter (néo-grotesque, écho au corps Helvetica)
     ---------------------------------------------------------- */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Échelle fluide (clamp : mobile → desktop) */
  --fs-display:  clamp(2.5rem, 1.8rem + 3.4vw, 4rem);
  --fs-h1:       clamp(2rem, 1.6rem + 2vw, 3rem);
  --fs-h2:       clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-h3:       1.5rem;
  --fs-h4:       1.25rem;
  --fs-body-lg:  1.125rem;
  --fs-body:     1rem;
  --fs-small:    0.875rem;
  --fs-eyebrow:  0.75rem;

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

  --ls-display: -0.01em;
  --ls-eyebrow: 0.14em;

  /* ----------------------------------------------------------
     8. ESPACEMENTS (base 4px)
     ---------------------------------------------------------- */
  --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: 4rem;    /* 64 */
  --space-9: 6rem;    /* 96 */
  --space-10: 8rem;   /* 128 */

  /* ----------------------------------------------------------
     9. RAYONS / BORDURES
     ---------------------------------------------------------- */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-pill: 999px;
  --border-hairline: 1px solid var(--c-border);

  /* ----------------------------------------------------------
     10. OMBRES (sobres, registre institutionnel)
     ---------------------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(16,47,71,.06), 0 1px 3px rgba(16,47,71,.08);
  --shadow-md: 0 4px 12px rgba(16,47,71,.08), 0 2px 4px rgba(16,47,71,.06);
  --shadow-lg: 0 12px 32px rgba(16,47,71,.12);

  /* ----------------------------------------------------------
     11. MISE EN PAGE
     ---------------------------------------------------------- */
  --container: 1200px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 3vw, 2.5rem);

  /* ----------------------------------------------------------
     12. MOUVEMENT (sobre, jamais gratuit)
     ---------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 160ms;
  --dur:      240ms;
  --dur-slow: 420ms;
}

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