/* ──────────────────────────────────────────────────────────────────────
   ECOSERRE · DESIGN TOKENS
   Source de vérité. Tout composant doit ne consommer que ces variables.
   ────────────────────────────────────────────────────────────────────── */

:root {
  /* ── COULEURS ────────────────────────────────────────────────────── */
  /* Primaires */
  --color-forest-900: #1F3D2C;   /* CTA primaire, headers sombres, logo */
  --color-forest-700: #2D5A3F;   /* hover, accent secondaire */
  --color-forest-500: #4F7A5D;   /* tints, illustrations subtiles */
  --color-forest-200: #C8D6CD;   /* fond doux, bordure verte légère */
  --color-forest-50:  #EEF2EE;   /* surface teintée très claire */

  /* Accent terre cuite */
  --color-clay-600: #B85F40;     /* hover du clay */
  --color-clay-500: #D97757;     /* CTA secondaire, badge promo */
  --color-clay-100: #F6E0D5;     /* fond badge doux */

  /* Sable doré */
  --color-sand-500: #E8B86D;     /* subventions, highlights */
  --color-sand-100: #FAEFD9;     /* fond subvention doux */

  /* Neutres */
  --color-cream:    #FAFAF7;     /* fond page */
  --color-white:    #FFFFFF;     /* surface card / form */
  --color-line:     #E5E5E0;     /* bordures, dividers */
  --color-line-strong: #CCCCC4;  /* bordure marquée */
  --color-mute:     #7A7A75;     /* texte secondaire */
  --color-ink-700:  #3A3A35;     /* texte secondaire fort */
  --color-ink:      #1A1A1A;     /* texte principal — jamais #000 */

  /* Sémantiques */
  --color-success:  #0F6E56;     /* stock dispo */
  --color-success-bg: #DDEEE7;
  --color-warning:  #854F0B;     /* délai */
  --color-warning-bg: #F6E8CC;
  --color-danger:   #993C1D;     /* rupture, erreur */
  --color-danger-bg: #F4DDD3;
  --color-info:     #2D5A3F;     /* info marque */
  --color-info-bg:  #DCE6DE;

  /* ── TYPOGRAPHIE ────────────────────────────────────────────────── */
  --font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
  --font-body:    "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Echelle modulaire mobile-first (max-width: 1023px) */
  --fs-display: 2.5rem;     /* 40px — H1 hero mobile */
  --fs-h1:      2rem;       /* 32px */
  --fs-h2:      1.625rem;   /* 26px */
  --fs-h3:      1.375rem;   /* 22px */
  --fs-h4:      1.125rem;   /* 18px */
  --fs-body-lg: 1.0625rem;  /* 17px */
  --fs-body:    1rem;       /* 16px */
  --fs-small:   0.9375rem;  /* 15px */
  --fs-caption: 0.875rem;   /* 14px */
  --fs-micro:   0.75rem;    /* 12px — labels, eyebrows */

  --lh-tight:   1.15;
  --lh-snug:    1.3;
  --lh-normal:  1.55;
  --lh-relaxed: 1.65;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow: 0.12em;

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

  /* ── ESPACEMENTS ────────────────────────────────────────────────── */
  /* Échelle 4px : multiplicateurs réguliers, pas de demi-valeurs */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ── RAYONS ─────────────────────────────────────────────────────── */
  --radius-xs: 2px;     /* badges, chips étroits */
  --radius-sm: 4px;     /* inputs, boutons compacts */
  --radius-md: 8px;     /* boutons standards, cards petites */
  --radius-lg: 12px;    /* cards produits, panneaux */
  --radius-xl: 20px;    /* hero blocks, modales */
  --radius-pill: 999px; /* pills et badges arrondis */

  /* ── BORDURES ───────────────────────────────────────────────────── */
  --border-w: 1px;
  --border-w-strong: 2px;
  --border-default: 1px solid var(--color-line);
  --border-strong:  1px solid var(--color-line-strong);
  --border-focus:   2px solid var(--color-forest-900);

  /* ── OMBRES ─────────────────────────────────────────────────────── */
  /* Discrètes — éviter les drop-shadow "tech startup" */
  --shadow-xs: 0 1px 2px rgba(26,26,26,0.04);
  --shadow-sm: 0 1px 3px rgba(26,26,26,0.06), 0 1px 2px rgba(26,26,26,0.04);
  --shadow-md: 0 4px 12px rgba(26,26,26,0.07), 0 1px 3px rgba(26,26,26,0.04);
  --shadow-lg: 0 12px 32px rgba(26,26,26,0.09), 0 2px 6px rgba(26,26,26,0.04);
  --shadow-focus: 0 0 0 3px rgba(31,61,44,0.18);

  /* ── LAYOUT ─────────────────────────────────────────────────────── */
  --container-max: 1280px;
  --container-narrow: 880px;
  --gutter-mobile: 16px;
  --gutter-tablet: 24px;
  --gutter-desktop: 32px;

  /* Touch target minimum */
  --tap-min: 44px;

  /* ── MOTION ─────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 360ms;
}

/* ── BREAKPOINTS (commentaires de référence) ──────────────────────────
   mobile  :  0 → 639
   tablet  :  640 → 1023
   desktop :  1024 → 1399
   wide    :  1400+
   ──────────────────────────────────────────────────────────────────── */