/* ==========================================================================
   COLORS — Chantier Zéro
   ==========================================================================
   Base palette estimated from the written brief (fond quasi-noir, texte
   crème, or sobre, vert WhatsApp assumé) — exact hex values were not
   provided (no CSS export / screenshot). Flagged for confirmation.

   Structured for reskinning: every semantic token below resolves to a
   base "--cz-*" primitive. To reskin for another driver/brand, replace
   only the primitives in this file — every component and page stays
   untouched because they consume the semantic layer.
   ========================================================================== */

:root {
  /* ---- Primitives : neutrals (warm, near-black → cream) ---- */
  --cz-black-100: #0b0a08;   /* deepest bg, hero / header */
  --cz-black-90:  #14120e;
  --cz-black-80:  #1e1b15;
  --cz-black-70:  #2b271e;
  --cz-black-60:  #3d372a;

  --cz-cream-100: #faf6ec;   /* lightest, page bg for admin/light surfaces */
  --cz-cream-90:  #f3ead9;   /* card bg, light surface */
  --cz-cream-80:  #e9dcc2;
  --cz-cream-70:  #d8c69f;

  --cz-ink-100:   #1c1812;   /* body text on light surfaces */
  --cz-ink-70:    #4a4335;
  --cz-ink-50:    #756b58;

  /* ---- Primitives : gold accent (sober, not gaudy) ---- */
  --cz-gold-100:  #c9a24a;
  --cz-gold-120:  #ddb968;   /* hover / lighter */
  --cz-gold-80:   #a9822f;   /* pressed / darker */
  --cz-gold-20:   rgba(201, 162, 74, 0.16);  /* tint bg / focus ring */
  --cz-gold-line: rgba(201, 162, 74, 0.18);  /* filet fin des cartes et bandeaux du site public */

  /* ---- Accent site-wide, tranché le 31/07 avec Hubert et Suzanne (comparatif
     de 6 associations, artefacts/palette-couleurs-comparatif-31-07-2026.html) :
     cobalt + cuivre, pour casser le cliché "VTC = noir et or" sans copier le
     duo cobalt/terre cuite qui n'avait pas convaincu Suzanne. ---- */
  --cz-cobalt-100: #5b8fb8;
  --cz-cobalt-120: #7aa5c7;  /* hover / lighter */
  --cz-cobalt-80:  #44708f;  /* pressed / darker */
  --cz-cobalt-20:  rgba(91, 143, 184, 0.16);

  /* Cuivre — 2e accent, réservé aux emphases de titre (<em>), pour garder
     le principe "2 couleurs franches" déjà validé sur le prototype Obernai. */
  --cz-copper-100: #c17a4f;
  --cz-copper-120: #d6926a;

  /* Texte affiché SUR l'accent (boutons, badges) — un vrai token séparé de
     --cz-black-100 (couleur du fond de page), pour pouvoir varier l'un sans
     toucher à l'autre. --text-on-accent-cobalt était un gris bleuté (#262b30)
     qui, posé sur le cobalt, se lisait "bleu sur bleu" (Hubert, 15/08) — passé
     à l'encre chaude du site (--cz-ink-100), neutre, qui tranche vraiment. */
  --text-on-accent: #0b0a08;      /* texte sur accent or (H1, resté doré) */
  --text-on-accent-cobalt: #1c1812; /* texte sur accent cobalt (boutons, badges) */

  /* ---- Primitives : functional ---- */
  --cz-whatsapp:      #25d366;  /* used ONLY for the WhatsApp CTA, not in the base UI palette */
  --cz-whatsapp-dark: #1da851;
  --cz-success:  #4d8f63;
  --cz-success-dark: #3c7350;
  --cz-warning:  #c98a35;
  --cz-warning-dark: #a86f28;
  --cz-danger:   #b8483f;
  --cz-danger-dark: #96382f;
  --cz-info:     #4a7c9e;

  /* ---- Semantic : dark surface (marketing / hero / header / footer) ---- */
  --surface-dark-1: var(--cz-black-100);
  --surface-dark-2: var(--cz-black-90);
  --surface-dark-3: var(--cz-black-80);
  --border-dark:    var(--cz-black-60);
  --text-on-dark-primary:   var(--cz-cream-100);
  --text-on-dark-secondary: var(--cz-cream-80);
  --text-on-dark-muted:     #a89b81;

  /* ---- Semantic : light surface (admin tool / forms / print) ---- */
  --surface-light-1: var(--cz-cream-100);
  --surface-light-2: #ffffff;
  --surface-light-3: var(--cz-cream-90);
  --border-light:    var(--cz-cream-70);
  --text-on-light-primary:   var(--cz-ink-100);
  --text-on-light-secondary: var(--cz-ink-70);
  --text-on-light-muted:     var(--cz-ink-50);

  /* ---- Semantic : accent ----
     Cobalt, tranché le 31/07 (voir primitives ci-dessus). Le H1 reste en or
     ailleurs dans le CSS — seule exception volontaire à ce token. */
  --accent-gold:       var(--cz-cobalt-100);
  --accent-gold-hover: var(--cz-cobalt-120);
  --accent-gold-press: var(--cz-cobalt-80);
  --accent-gold-tint:  var(--cz-cobalt-20);

  /* ---- Semantic : status ---- */
  --status-success-bg: rgba(77, 143, 99, 0.14);
  --status-success-fg: #3a6b49;
  --status-warning-bg: rgba(201, 138, 53, 0.16);
  --status-warning-fg: #8f611f;
  --status-danger-bg:  rgba(184, 72, 63, 0.14);
  --status-danger-fg:  var(--cz-danger-dark);
  --status-info-bg:    rgba(74, 124, 158, 0.14);
  --status-info-fg:    #35617d;
  --status-neutral-bg: var(--cz-cream-90);
  --status-neutral-fg: var(--cz-ink-70);

  /* ---- Semantic : WhatsApp CTA (contextual, not a base UI color) ---- */
  --whatsapp-bg:     var(--cz-whatsapp);
  --whatsapp-bg-hover: var(--cz-whatsapp-dark);
  --whatsapp-fg:     #ffffff;
}