/* ===== Guyatouc Marché - tokens --od-* (source de vérité : app/globals.css, */
/* portés ici à l'identique - voir PLANNING-THEME-AUTONOME.md section 4) ===== */
/*                                                                             */
/* Trois invariants (valables dans les deux thèmes, jamais enfreints) :        */
/*  1. Une couleur d'univers ou l'accent n'est jamais du texte nu posé sur     */
/*     --od-bg : uniquement un fond plein (pastille/bouton/badge) avec son     */
/*     on-color associé.                                                       */
/*  2. --od-touc (seul univers clair) : texte toujours --od-on-univers-dark,   */
/*     jamais blanc. Les 4 autres univers utilisent --od-on-univers-light.     */
/*  3. Un texte posé sur une teinte claire (--od-*-tint) utilise               */
/*     --od-ink-on-tint (fixe), jamais --od-ink (qui s'inverse en sombre).     */
/*                                                                             */
/* Stratégie de thème : clair par défaut (:root), sombre soit explicite via   */
/* [data-theme="dark"] posé par assets/js/theme-toggle.js (voir function.php),*/
/* soit via la préférence système (prefers-color-scheme) tant qu'aucun choix  */
/* clair explicite n'a été fait - un data-theme="light" explicite l'emporte   */
/* toujours sur la préférence système.                                        */

:root {
  /* Base : sable / encre. */
  --od-bg: #F6EFE2;
  --od-bg-2: #EFE5D2;
  --od-surface: #FFFFFF;
  --od-ink: #221A12;
  --od-muted: #6B5C48;
  --od-border: #221A12;
  --od-line: 2px;

  /* Univers : 5 couleurs + 5 teintes claires. Identité de marque : mêmes      */
  /* valeurs dans les deux thèmes (invariant 1 ci-dessus).                     */
  --od-maison: #C4441C;
  --od-maison-tint: #F7DCCF;
  --od-froid: #0E6E8E;
  --od-froid-tint: #CFE6EF;
  --od-carbet: #3B7A2B;
  --od-carbet-tint: #D8EBCF;
  --od-touc: #E09107;
  --od-touc-tint: #FBE4BC;
  --od-terrain: #8A5A1E;
  --od-terrain-tint: #EEDFC6;

  /* On-color à associer au fond univers correspondant (invariant 2). */
  --od-on-univers-light: #FFFFFF;
  --od-on-univers-dark: #221A12;
  /* Texte/détail posé sur une teinte claire d'univers, fixe (invariant 3). */
  --od-ink-on-tint: #221A12;

  /* Accent (surlignage kicker, pastille panier, CTA pack). Fond toujours      */
  /* plein + texte encre dessus, jamais utilisé comme texte nu.                */
  --od-accent: #F5C542;
  --od-on-accent: #221A12;

  /* Rayons : petit (puces, vignettes internes), moyen (cartes), grand         */
  /* (tuiles hero, bloc pack), pilule (boutons, nav, badges). */
  --od-radius-sm: 10px;
  --od-radius-md: 16px;
  --od-radius-lg: 22px;
  --od-radius-pill: 100px;

  /* Empattement d'ombre portée "tampon" (offset net, sans flou), la couleur   */
  /* est fournie par le composant (souvent --od-ink ou la couleur d'univers).  */
  --od-shadow-sm: 4px;
  --od-shadow-md: 6px;

  /* Gutter horizontal du conteneur, identique à la maquette. */
  --od-gutter: clamp(18px, 4vw, 44px);
}

/* Préférence système sombre, seulement si aucun choix clair explicite. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --od-bg: #221A12;
    --od-bg-2: #2A2013;
    --od-surface: #2F2416;
    --od-ink: #F6EFE2;
    --od-muted: #B9A98C;
    --od-border: #4A3B28;
    /* Univers, teintes, on-color et accent : identiques au thème clair. */
  }
}

/* Choix explicite sombre (localStorage 'od-theme'), l'emporte dans tous les   */
/* cas, y compris si le système est en clair.                                  */
html[data-theme="dark"] {
  --od-bg: #221A12;
  --od-bg-2: #2A2013;
  --od-surface: #2F2416;
  --od-ink: #F6EFE2;
  --od-muted: #B9A98C;
  --od-border: #4A3B28;
  /* Univers, teintes, on-color et accent : identiques au thème clair. */
}