/* ==========================================================================
   variables.css — Jetons de thème (clair / sombre) pilotés par variables CSS.
   Contrastes visés : WCAG AA minimum (texte >= 4.5:1), souvent AAA.
   Les couleurs de marque (primary/secondary) sont surchargeables via les
   réglages back-office (injectées en <style> inline dans le layout).
   ========================================================================== */

:root {
  /* Couleurs de marque (valeurs par défaut, surchargées par les settings) */
  --brand-primary: #7b1e2b;      /* bordeaux */
  --brand-primary-strong: #5c141d;
  --brand-secondary: #c9a227;    /* or */

  /* Rayons, ombres, espacements */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --shadow-1: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .08);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, .15);
  --space: 1rem;
  --container: 1140px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --transition: .2s ease;
}

/* ---------------------- Thème CLAIR (par défaut) ------------------------- */
:root,
[data-theme="light"] {
  color-scheme: light;

  --bg: #faf7f2;             /* fond général chaud clair */
  --bg-elevated: #ffffff;    /* cartes, panneaux */
  --bg-subtle: #f0ebe3;      /* zones secondaires */
  --border: #ded5c8;

  --text: #1c1917;           /* ~15:1 sur --bg : AAA */
  --text-muted: #5b524a;     /* ~7:1 : AAA texte normal */
  --text-inverse: #ffffff;

  --primary: var(--brand-primary);
  --primary-contrast: #ffffff;   /* texte sur boutons primaires */
  --secondary: #8a6d10;          /* or foncé pour texte/lien accessible */

  --link: #7b1e2b;
  --link-hover: #5c141d;

  --success: #1b6b3a;
  --success-bg: #e4f4ea;
  --danger: #b3261e;
  --danger-bg: #fbe9e7;
  --warning: #8a5a00;
  --warning-bg: #fff4df;

  --focus-ring: #1a5cff;
}

/* ---------------------------- Thème SOMBRE ------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #14110f;
  --bg-elevated: #201b18;
  --bg-subtle: #2a2320;
  --border: #3d342f;

  --text: #f5efe8;           /* ~14:1 sur --bg : AAA */
  --text-muted: #c3b8ad;     /* ~8:1 : AAA */
  --text-inverse: #14110f;

  --primary: #e0899a;            /* bordeaux clairci pour contraste sur fond sombre */
  --primary-contrast: #2a0d12;
  --secondary: #e8c65a;          /* or clair, lisible sur fond sombre */

  --link: #f0a5b4;
  --link-hover: #f6c3cd;

  --success: #7fd6a0;
  --success-bg: #14301f;
  --danger: #f6a49d;
  --danger-bg: #35110e;
  --warning: #f0c778;
  --warning-bg: #33260c;

  --focus-ring: #7ea6ff;
}

/* Respecte la préférence système si aucun thème explicite n'est choisi. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #14110f;
    --bg-elevated: #201b18;
    --bg-subtle: #2a2320;
    --border: #3d342f;
    --text: #f5efe8;
    --text-muted: #c3b8ad;
    --text-inverse: #14110f;
    --primary: #e0899a;
    --primary-contrast: #2a0d12;
    --secondary: #e8c65a;
    --link: #f0a5b4;
    --link-hover: #f6c3cd;
    --success: #7fd6a0;
    --success-bg: #14301f;
    --danger: #f6a49d;
    --danger-bg: #35110e;
    --warning: #f0c778;
    --warning-bg: #33260c;
    --focus-ring: #7ea6ff;
  }
}