/* ==========================================================================
   PROMO PLUS — THÈME
   --------------------------------------------------------------------------
   Pour changer le design du site, modifiez UNIQUEMENT ce fichier :
   couleurs, dégradé de marque, polices, arrondis, ombres, espacements,
   tailles des contrôles. Tous les composants (app.css) lisent ces variables.
   ========================================================================== */

:root {
  /* --- Couleurs de marque (reprises du logo : violet → magenta → ambre) --- */
  --brand-1: #7c3aed;          /* violet */
  --brand-2: #c026d3;          /* magenta */
  --brand-3: #f59e0b;          /* ambre */
  --brand-gradient: linear-gradient(120deg, var(--brand-1) 0%, var(--brand-2) 55%, var(--brand-3) 100%);
  --brand-gradient-soft: linear-gradient(120deg, #f3edff 0%, #fbeefd 55%, #fff6e3 100%);

  --primary: #6d28d9;
  --primary-hover: #5b21b6;
  --primary-soft: #f3eeff;
  --primary-contrast: #ffffff;

  /* --- Couleurs fonctionnelles --- */
  --save: #047857;             /* économies */
  --save-soft: #e7f6ef;
  --warning: #b45309;
  --warning-soft: #fff4e0;
  --danger: #b91c1c;
  --danger-soft: #fdecec;
  --info: #1d4ed8;
  --info-soft: #eaf0ff;

  /* --- Surfaces et textes --- */
  --bg: #f6f5fa;
  --surface: #ffffff;
  --surface-2: #f0eff6;
  --surface-3: #e8e6f0;
  --border: #e4e2ec;
  --border-strong: #cfcbdc;
  --text: #17141f;
  --text-2: #57526a;
  --text-3: #8a8599;
  --overlay: rgba(23, 20, 31, 0.48);

  /* --- Typographie --- */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --font-numbers: var(--font);
  --fs-xs: 0.75rem;    /* 12 */
  --fs-sm: 0.8125rem;  /* 13 */
  --fs-base: 0.9375rem;/* 15 */
  --fs-md: 1.0625rem;  /* 17 */
  --fs-lg: 1.25rem;    /* 20 */
  --fs-xl: 1.5rem;     /* 24 */
  --fs-2xl: 1.875rem;  /* 30 */
  --fs-3xl: 2.375rem;  /* 38 */
  --fw-regular: 450;
  --fw-medium: 550;
  --fw-semibold: 650;
  --fw-bold: 750;
  --lh: 1.5;
  --tracking-tight: -0.015em;

  /* --- Formes --- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --radius-pill: 999px;

  /* --- Ombres --- */
  --shadow-1: 0 1px 2px rgba(23, 20, 31, 0.05), 0 1px 1px rgba(23, 20, 31, 0.03);
  --shadow-2: 0 4px 18px rgba(23, 20, 31, 0.07), 0 1px 3px rgba(23, 20, 31, 0.04);
  --shadow-3: 0 16px 44px rgba(23, 20, 31, 0.14);
  --focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.28);

  /* --- Espacements --- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;

  /* --- Contrôles (boutons, champs) : discrets, pas de gros boutons --- */
  --control-h: 40px;
  --control-h-sm: 32px;
  --control-h-lg: 46px;
  --control-px: 14px;

  /* --- Mise en page --- */
  --container: 1880px;       /* largeur maximale du contenu : tout l'écran jusqu'aux écrans 1920 px */
  --gutter: 16px;
  --topbar-h: 60px;
  --bottomnav-h: 64px;

  /* --- Animations --- */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 160ms;
}

/* Thème sombre : gris-violet doux (pas de noir pur), contrastes AA.
   Automatique (suit le réglage du téléphone) ou forcé par le bouton jour / nuit. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --primary: #b9a3ff;
    --primary-hover: #cdbcff;
    --primary-soft: #3a3359;
    --primary-contrast: #1d1830;
    --save: #4ade9b;
    --save-soft: #21402f;
    --warning: #fbbf4d;
    --warning-soft: #42361d;
    --danger: #ff8a8a;
    --danger-soft: #4a2628;
    --info: #9cbcff;
    --info-soft: #253150;
    --bg: #242231;
    --surface: #2e2c3e;
    --surface-2: #38354b;
    --surface-3: #434058;
    --border: #423f57;
    --border-strong: #5a5677;
    --text: #f5f3fb;
    --text-2: #cdc8dc;
    --text-3: #a29cb6;
    --overlay: rgba(10, 8, 18, 0.55);
    --brand-gradient-soft: linear-gradient(120deg, #33294d 0%, #3b2943 55%, #3d3424 100%);
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.28);
    --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.4);
    --focus-ring: 0 0 0 3px rgba(185, 163, 255, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --primary: #b9a3ff;
  --primary-hover: #cdbcff;
  --primary-soft: #3a3359;
  --primary-contrast: #1d1830;
  --save: #4ade9b;
  --save-soft: #21402f;
  --warning: #fbbf4d;
  --warning-soft: #42361d;
  --danger: #ff8a8a;
  --danger-soft: #4a2628;
  --info: #9cbcff;
  --info-soft: #253150;
  --bg: #242231;
  --surface: #2e2c3e;
  --surface-2: #38354b;
  --surface-3: #434058;
  --border: #423f57;
  --border-strong: #5a5677;
  --text: #f5f3fb;
  --text-2: #cdc8dc;
  --text-3: #a29cb6;
  --overlay: rgba(10, 8, 18, 0.55);
  --brand-gradient-soft: linear-gradient(120deg, #33294d 0%, #3b2943 55%, #3d3424 100%);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 6px 20px rgba(0, 0, 0, 0.28);
  --shadow-3: 0 18px 48px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 3px rgba(185, 163, 255, 0.35);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }