/* ======================================================
   EVOLEADZ — base.css (COMPLET)
   - Design tokens (colors)
   - Typography scale
   - Base resets
   ====================================================== */

/* ------------------------------
   TOKENS
-------------------------------- */
:root{
  /* Container */
  --container: 1140px;
  --gutter: 24px;
  --header-h: 72px;

  /* ======================================================
     BRAND SYSTEM (aligned with Figma / guide)
     ====================================================== */

  /* Primary (Bleu nuit) */
  --c-primary-bg: #0B1F33;
  --c-primary-bg-2: #1F3040;

  /* Accent (Bleu électrique) */
  --c-accent: #1E90FF;
  --c-accent-hover: #1F7FE3;
  --c-accent-active: #196CC2;

  /* Conversion (Vert) */
  --c-conversion: #2ED573;
  --c-conversion-hover: #2BB865;
  --c-conversion-active: #239E58;

  /* Backward compat */
  --c-primary: var(--c-conversion);
  --c-primary-hover: var(--c-conversion-hover);
  --c-primary-active: var(--c-conversion-active);

  --c-secondary: var(--c-accent);
  --c-secondary-hover: var(--c-accent-hover);
  --c-secondary-active: var(--c-accent-active);

  /* Backgrounds & Surfaces */
  --c-bg: var(--c-primary-bg);
  --c-bg-2: var(--c-primary-bg-2);
  --c-surface: #FFFFFF;
  --c-surface-soft: #F5F7FA;
  --c-border: rgba(11, 31, 51, 0.10);

  /* Text */
  --c-text: #2E2E2E;
  --c-muted: #6c757d;
  --c-text-inv: #FFFFFF;
  --c-text-inv-muted: rgba(255,255,255,.78);

  /* Feedback */
  --c-success: var(--c-conversion);
  --c-warning: #F7C034;
  --c-info: var(--c-accent);

  /* Radius / Shadow */
  --radius: 18px;
  --radius-pill: 999px;
  --shadow: 0 18px 60px rgba(11,31,51,.14);
  --shadow-strong: 0 26px 90px rgba(11,31,51,.20);

  /* Typography */
  --font: Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Type scale (charte) */
  --h1: 44px; --h1-lh: 1.12; --h1-w: 800;
  --h2: 32px; --h2-lh: 1.2;  --h2-w: 800;
  --h3: 20px; --h3-lh: 1.3;  --h3-w: 700;

  --body: 16px; --body-lh: 1.6; --body-w: 400;
  --small: 14px; --small-lh: 1.5;

  --label: 12px; --label-lh: 1.2; --label-w: 600;

  --title-track: -0.02em;
}

/* ------------------------------
   RESET / BASE
-------------------------------- */
*,
*::before,
*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  margin: 0;
  font-family: var(--font);
  font-size: var(--body);
  line-height: var(--body-lh);
  font-weight: var(--body-w);
  color: var(--c-text);
  background: var(--c-surface-soft);
}

/* Images */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links */
a{ color: inherit; text-decoration: none; }

/* Selection */
::selection{ background: rgba(30,144,255,.25); }

/* ------------------------------
   TYPO — Defaults
   NOTE: On ne force PAS une couleur navy ici
   pour éviter noir sur sections dark si Elementor injecte des h2/h3.
-------------------------------- */
h1, h2, h3{
  margin: 0 0 12px;
  letter-spacing: var(--title-track);
  color: var(--c-text);
}

h1{ font-size: var(--h1); line-height: var(--h1-lh); font-weight: var(--h1-w); }
h2{ font-size: var(--h2); line-height: var(--h2-lh); font-weight: var(--h2-w); }
h3{ font-size: var(--h3); line-height: var(--h3-lh); font-weight: var(--h3-w); }

p{
  margin: 0 0 14px;
  max-width: 60ch;
  color: var(--c-muted);
}

/* Helpers */
.evo-text-muted{ color: var(--c-muted) !important; }
.evo-text-inv{ color: var(--c-text-inv) !important; }
.evo-text-inv-muted{ color: var(--c-text-inv-muted) !important; }

/* Optional helpers (si tu veux forcer sans h2/h3) */
.evo-title{
  font-size: var(--h2);
  line-height: var(--h2-lh);
  font-weight: 750;
  letter-spacing: var(--title-track);
  color: var(--c-text);
}
.evo-subtitle{
  font-size: var(--body);
  line-height: var(--body-lh);
  color: var(--c-muted);
  max-width: 68ch;
}

/* Labels / badges */
.evo-label{
  font-size: var(--label);
  line-height: var(--label-lh);
  font-weight: var(--label-w);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Focus visible */
:focus-visible{
  outline: 3px solid rgba(30,144,255,.35);
  outline-offset: 3px;
}

/* Elementor-safe scope (optionnel) */
.evo-page h1{ font-size: var(--h1) !important; line-height: var(--h1-lh) !important; font-weight: var(--h1-w) !important; }
.evo-page h2{ font-size: var(--h2) !important; line-height: var(--h2-lh) !important; font-weight: var(--h2-w) !important; }
.evo-page h3{ font-size: var(--h3) !important; line-height: var(--h3-lh) !important; font-weight: var(--h3-w) !important; }
.evo-page p { font-size: var(--body) !important; line-height: var(--body-lh) !important; font-weight: var(--body-w) !important; }