/* ─────────────────────────────────────────────────────────────
 * ZoliBat — Design Tokens (site marketing www.zolibat.com)
 * ─────────────────────────────────────────────────────────────
 *
 * Source unique de vérité pour la refonte visuelle. À inclure dans
 * chaque page HTML via <link rel="stylesheet" href="/marketing/tokens.css">.
 *
 * Règle : toute valeur de couleur, taille, espacement, radius, ombre
 * utilisée dans le CSS des pages marketing DOIT provenir d'un token
 * déclaré ici. Interdiction d'écrire une couleur hex ou un px arbitraire
 * directement dans le markup.
 *
 * Cohérence avec la SaaS : ces tokens reflètent la charte Zolibat
 * "verte forêt / or" déjà utilisée dans zolibat-app/src/index.css.
 * ───────────────────────────────────────────────────────────── */

:root {
  /* ── Palette de marque ───────────────────────────────────── */
  --color-primary-50:  #E8F1EE;
  --color-primary-100: #C3DBD2;
  --color-primary-200: #8FBCAB;
  --color-primary-300: #5A9C82;
  --color-primary-400: #2D7A5F;   /* --primary-light historique */
  --color-primary-500: #1B4D3E;   /* PRIMARY BRAND (vert forêt) */
  --color-primary-600: #153D31;
  --color-primary-700: #0F2E25;   /* --primary-dark historique */
  --color-primary-800: #0A1F19;
  --color-primary-900: #050F0C;

  --color-accent-50:   #FEF6E6;
  --color-accent-100:  #FBE6B8;
  --color-accent-200:  #F5C76B;   /* --secondary-light historique */
  --color-accent-300:  #EFB24F;
  --color-accent-400:  #E8A838;   /* ACCENT BRAND (or) */
  --color-accent-500:  #D0912A;
  --color-accent-600:  #8B6914;
  --color-accent-700:  #5E4810;

  /* ── Neutres (gris) ──────────────────────────────────────── */
  --color-neutral-0:   #FFFFFF;
  --color-neutral-50:  #FAFAF7;
  --color-neutral-100: #F5F5F0;   /* --bg historique (beige page) */
  --color-neutral-200: #EDEDE8;
  --color-neutral-300: #E8E8E3;   /* --border historique */
  --color-neutral-400: #D1D1CA;
  --color-neutral-500: #A0A097;
  --color-neutral-600: #6B6B62;
  --color-neutral-700: #5A5A5A;   /* --text-secondary historique */
  --color-neutral-800: #2E2E2A;
  --color-neutral-900: #1A1A1A;   /* --text historique */

  /* ── Couleurs sémantiques (pastels pour fond, pleins pour texte) */
  --color-success-bg:  rgba(46,125,50,0.12);
  --color-success-fg:  #2E7D32;
  --color-warning-bg:  rgba(245,158,11,0.15);
  --color-warning-fg:  #B45309;
  --color-danger-bg:   rgba(163,45,45,0.12);
  --color-danger-fg:   #A32D2D;
  --color-info-bg:     rgba(83,74,183,0.10);
  --color-info-fg:     #534AB7;

  /* ── Alias fonctionnels (utiliser de préférence) ─────────── */
  --color-bg-page:      var(--color-neutral-100);
  --color-bg-surface:   var(--color-neutral-0);
  --color-bg-subtle:    var(--color-neutral-50);
  --color-text-primary:   var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-inverse:   var(--color-neutral-0);
  --color-border-subtle:  var(--color-neutral-300);
  --color-border-strong:  var(--color-neutral-400);

  /* ── Typographie ─────────────────────────────────────────── */
  --font-sans:    'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'DM Serif Display', Georgia, serif;

  --font-size-xs:   12px;   /* caption */
  --font-size-sm:   14px;   /* small body */
  --font-size-base: 16px;   /* body */
  --font-size-lg:   18px;   /* lead */
  --font-size-xl:   20px;   /* H3 */
  --font-size-2xl:  24px;   /* H2 mobile */
  --font-size-3xl:  28px;   /* H2 desktop */
  --font-size-4xl:  36px;   /* H1 mobile */
  --font-size-5xl:  44px;   /* H1 desktop */
  --font-size-6xl:  56px;   /* Hero */

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --font-weight-extrabold:800;

  --line-height-tight:  1.15;   /* titres */
  --line-height-snug:   1.3;    /* sous-titres */
  --line-height-normal: 1.5;    /* body */
  --line-height-relaxed:1.65;   /* texte long (blog) */

  --letter-spacing-tight:  -0.02em;  /* H1/H2 */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.08em;   /* overline / caps */

  /* ── Espacements (scale 4/8 stricte) ─────────────────────── */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;
  --space-8:   64px;
  --space-9:   96px;
  --space-10:  128px;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-max:    1280px;
  --container-prose:  720px;     /* articles blog, CGV, etc. */
  --grid-gutter:      24px;
  --grid-gutter-mobile: 16px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* ── Ombres ──────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-focus: 0 0 0 3px rgba(232,168,56,0.35);  /* anneau doré */

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Breakpoints (documentation ; utiliser @media en CSS) ── */
  /* sm:  640px   — mobile large
     md:  768px   — tablette portrait
     lg:  1024px  — tablette paysage
     xl:  1280px  — desktop
     2xl: 1536px  — desktop large */

  /* ── Z-index (stacking order) ────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 10;
  --z-sticky:   20;
  --z-overlay:  50;
  --z-modal:    100;
  --z-toast:    200;
}

/* ─────────────────────────────────────────────────────────────
 * Reset global minimal + règles de base
 * ───────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--color-text-primary);
  background-color: var(--color-bg-page);
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { min-height: 100vh; }

img, svg, video { display: block; max-width: 100%; height: auto; }

a { color: var(--color-primary-500); text-decoration: none; transition: color var(--transition-fast); }
a:hover { color: var(--color-primary-400); }

:focus-visible {
  outline: 2px solid var(--color-accent-400);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Utilitaires de grille */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--grid-gutter-mobile); }
@media (min-width: 768px) { .container { padding-inline: var(--grid-gutter); } }

.container-prose { width: 100%; max-width: var(--container-prose); margin-inline: auto; padding-inline: var(--grid-gutter-mobile); }
@media (min-width: 768px) { .container-prose { padding-inline: var(--grid-gutter); } }