/* ============================================================
   ZISIMA — Design tokens (source unique de vérité du nouveau design)
   Préfixe --zd-* : les variables historiques --zsm-* ne sont PAS
   modifiées. Toute nouvelle règle de design n'utilise que ces tokens.
   Thème piloté par html[data-zsm-theme="light|dark"].
   ============================================================ */

:root {
  /* Marque : le rose foncé historique du site (--zsm-pink #c2185b, couleur d'accent du logo et de l'admin) */
  --zd-brand: #c2185b;        /* texte blanc dessus : 5.9:1 */
  --zd-brand-press: #9c1349;
  --zd-on-brand: #ffffff;
  --zd-accent: #e91e63;       /* rose vif du site (--zsm-pink-light) : J'aime, badges de notification */
  --zd-sun: #ffb020;      /* sponsorisé */
  --zd-on-sun: #2b1b00;
  --zd-wa: #128043;       /* WhatsApp assombri : texte blanc ≥ 4.5:1 */
  --zd-wa-press: #0d6634;
  --zd-on-wa: #ffffff;
  --zd-on-media: #ffffff;
  --zd-media-scrim: rgba(0, 0, 0, 0.45);
  --zd-brand-glow: rgba(194, 24, 91, 0.32);
  /* Scène des stories : toujours sombre, quel que soit le thème */
  --zd-stage: #000000;
  --zd-on-stage: #ffffff;
  --zd-stage-scrim: rgba(0, 0, 0, 0.72);
  --zd-glass: rgba(255, 255, 255, 0.18);
  --zd-text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  --zd-icon-drop: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55));
  --zd-mask: #000; /* couleur de masque (mask-image), pas une couleur affichée */
  /* Couleurs de marque des réseaux (panneau Partager) */
  --zd-net-whatsapp: #25d366;
  --zd-net-facebook: #1877f2;
  --zd-net-messenger: #0084ff;
  --zd-net-telegram: #229ed9;
  --zd-net-x: #000000;
  --zd-net-linkedin: #0a66c2;
  --zd-net-sms: #34a853;
  --zd-net-email: #ea4335;

  /* Mesures */
  --zd-radius-card: 16px;
  --zd-radius-btn: 12px;
  --zd-radius-pill: 999px;
  --zd-gap: 12px;
  --zd-bar-h: 64px;
  --zd-safe-b: env(safe-area-inset-bottom, 0px);
  --zd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --zd-font: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---------- MODE CLAIR (par défaut) — gris neutres, sans teinte bleue ---------- */
  --zd-bg: #f4f4f6;
  --zd-surface: #ffffff;
  --zd-surface-2: #ececf0;
  --zd-border: #e0e0e6;
  --zd-text: #18181b;
  --zd-text-2: #52525b;       /* 7.6:1 sur blanc */
  --zd-text-3: #71717a;       /* 4.8:1 sur blanc */
  --zd-overlay: rgba(10, 10, 12, 0.45);
  --zd-shadow: 0 1px 2px rgba(10, 10, 12, 0.06), 0 6px 18px rgba(10, 10, 12, 0.07);
  --zd-shadow-lift: 0 10px 28px rgba(10, 10, 12, 0.16);
  --zd-bar-bg: rgba(255, 255, 255, 0.92);
  --zd-bar-solid: #ffffff;
  --zd-header-bg: rgba(255, 255, 255, 0.94);
  --zd-chip-bg: #e3f4ea;
  --zd-chip-fg: #0f6b3a;
  --zd-rent-bg: #ffe9db;
  --zd-rent-fg: #a4410c;
  --zd-icon: #5f5f69;
  --zd-icon-active: var(--zd-brand);
  --zd-danger: #c62828;       /* Signaler / Supprimer : 5.6:1 sur blanc */
  --zd-brand-soft: #fce4ec;   /* fond rose pâle (pastilles, sélection) */
  --zd-brand-fg: #ad1457;     /* 6.4:1 sur --zd-brand-soft */
  --zd-hover: rgba(10, 10, 12, 0.05);
  --zd-ring-unseen: linear-gradient(135deg, var(--zd-brand), var(--zd-sun));
}

html[data-zsm-theme="light"] {
  color-scheme: light;
}

/* ---------- MODE SOMBRE ---------- */
html[data-zsm-theme="dark"] {
  color-scheme: dark;
  /* gris neutres proches du noir historique (#0a0a0a / #1e1e1e), sans teinte bleue */
  --zd-bg: #0d0d0f;
  --zd-surface: #17171b;
  --zd-surface-2: #222227;
  --zd-border: rgba(255, 255, 255, 0.09);
  --zd-text: #f2f2f5;
  --zd-text-2: #b5b5bf;
  --zd-text-3: #8b8b95;       /* 5.3:1 sur --zd-surface */
  --zd-overlay: rgba(0, 0, 0, 0.62);
  --zd-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  --zd-shadow-lift: 0 12px 32px rgba(0, 0, 0, 0.5);
  --zd-bar-bg: rgba(23, 23, 27, 0.92);
  --zd-bar-solid: #17171b;
  --zd-header-bg: rgba(13, 13, 15, 0.94);
  --zd-chip-bg: rgba(52, 211, 120, 0.14);
  --zd-chip-fg: #7be6a8;
  --zd-rent-bg: rgba(255, 138, 76, 0.16);
  --zd-rent-fg: #ffb184;
  --zd-icon: #9a9aa5;
  --zd-icon-active: #f06292;  /* rose clair du site, lisible sur fond sombre (5.3:1) */
  --zd-danger: #ff8a80;
  --zd-brand-soft: rgba(240, 98, 146, 0.16);
  --zd-brand-fg: #f48fb1;
  --zd-hover: rgba(255, 255, 255, 0.06);
}