/* =============================================================================
   EcoVivo Design System — tokens
   Repris tels quels du dossier de conception (Charte Graphique EcoVivo v1.0).
   Ce fichier est la source de verite : aucune couleur ni police ne doit etre
   definie ailleurs. Charge avant style.css.
   ============================================================================= */

:root {

  /* --- Palette de base ---------------------------------------------------- */
  --brun-ocre:        #9B6A3A;
  --brun-ocre-dark:   #7C5430;
  --vert-sauge:       #6F8B6B;
  --vert-sauge-dark:  #5A7256;
  --vert-sauge-light: #8FA88B;
  --beige-sable:      #E8DDC9;
  --beige-sable-dark: #DCCDAF;
  --ocre-doux:        #C89A4A;
  --anthracite:       #2A2A2A;
  --noir:             #211D18;
  --gris-fonce:       #514C45;
  --blanc:            #FFFFFF;

  /* --- Semantique : texte ------------------------------------------------- */
  --color-text-body:              var(--noir);
  --color-text-muted:             var(--gris-fonce);
  --color-text-heading-primary:   var(--vert-sauge-dark);
  --color-text-heading-secondary: var(--brun-ocre);
  --color-text-caption:           var(--gris-fonce);
  --color-text-on-dark:           var(--beige-sable);

  /* --- Semantique : surfaces ---------------------------------------------- */
  --color-surface-page: var(--blanc);
  --color-surface-card: var(--blanc);
  --color-surface-tint: var(--beige-sable);
  --color-surface-dark: var(--noir);
  --color-surface-line: color-mix(in oklch, var(--brun-ocre) 22%, white);

  /* --- Semantique : action ------------------------------------------------ */
  --color-cta-bg:       var(--vert-sauge);
  --color-cta-bg-hover: var(--vert-sauge-dark);
  --color-cta-text:     var(--blanc);
  --color-accent-warm:  var(--ocre-doux);
  --color-link:         var(--brun-ocre);
  --color-link-hover:   var(--brun-ocre-dark);

  /* --- Bordures et focus --------------------------------------------------- */
  --color-border:        color-mix(in oklch, var(--brun-ocre) 30%, white);
  --color-border-strong: var(--brun-ocre);
  --color-focus-ring:    var(--ocre-doux);

  /* --- Alerte -------------------------------------------------------------- */
  /* Hors charte : seule teinte ajoutee, pour les points de vigilance qui
     doivent se distinguer de l ocre d attente. */
  --color-alerte: #A5432F;

  /* --- Typographie --------------------------------------------------------- */
  /* Lora = titres, Raleway = corps, Quicksand = legendes et badges.
     Les fichiers sont charges par le gabarit (Google Fonts). */
  --font-serif: 'Lora', Georgia, serif;
  --font-sans:  'Raleway', 'Segoe UI', sans-serif;
  --font-round: 'Quicksand', 'Segoe UI', sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  --text-display:  4rem;
  --text-h1:       2.5rem;
  --text-h2:       1.625rem;
  --text-h3:       1.25rem;
  --text-body:     1.0625rem;
  --text-body-sm:  0.9375rem;
  --text-caption:  0.8125rem;

  --leading-tight:   1.15;
  --leading-heading: 1.25;
  --leading-body:    1.6;

  /* --- Espacements --------------------------------------------------------- */
  --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;

  --content-max-width:        1140px;
  --content-max-width-narrow: 720px;
  --gutter: var(--space-5);

  /* --- Rayons et ombres ---------------------------------------------------- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   22px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 3px rgba(42,32,18,.08), 0 1px 2px rgba(42,32,18,.06);
  --shadow-md: 0 6px 16px rgba(42,32,18,.10), 0 2px 6px rgba(42,32,18,.06);
  --shadow-lg: 0 16px 40px rgba(42,32,18,.14), 0 4px 10px rgba(42,32,18,.08);

  --ease-standard: cubic-bezier(.4,0,.2,1);
  --duration-fast: 150ms;
  --duration-base: 240ms;

  /* --- Gabarit ------------------------------------------------------------- */
  --largeur-sidebar: 308px;

  /* =========================================================================
     Pont de compatibilite
     Les composants ecrits avant l adoption du design system (frise Gantt,
     tableaux, lightbox, galerie, pastilles de statut) utilisent ces noms.
     Ils sont ici des alias, non des couleurs propres : ne rien redefinir.
     ========================================================================= */
  --sauge:  var(--vert-sauge);
  --foret:  var(--vert-sauge-dark);
  --ocre:   var(--ocre-doux);
  --brun:   var(--brun-ocre);
  --texte:  var(--noir);
  --ligne:  var(--color-border);

  /* Heritees, sans equivalent dans la charte : conservees telles quelles. */
  --creme:  #F6F5F2;
  --bronze: #D5B58F;

  --panneau:     var(--color-surface-card);
  --ombre:       var(--shadow-lg);
  --ombre-douce: var(--shadow-md);

  --police-titre:   var(--font-serif);
  --police-corps:   var(--font-sans);
  --police-legende: var(--font-round);

  --largeur: var(--content-max-width);
}