/* ==========================================================================
   1. PALETTE DE COULEURS GLOBALE — Tsitsi Store
   ========================================================================== */
:root {
  /* --- Palette chaude "Automne" (thème principal) --- */
  --rich-mahogany: #3c1518;
  --dark-garnet: #69140e;
  --rust-brown: #a44200;
  --bronze: #d58936;
  --vanilla-custard: #f2f3ae;

  /* --- Palette froide "Aurora" (thème sombre) --- */
  --dark-void: #020211;
  --cosmic-blue: #180c4e;
  --aurora-teal: #0de7ac;
  --aurora-purple: #c433eb;
  --nebula-indigo: #4a00ff;

  /* --- Couleurs UI système --- */
  --ios-blue: #007AFF;
  --ios-red: #FF3B30;
  --ios-border: rgba(60, 60, 67, 0.2);
  --ios-blur: blur(20px) saturate(180%);
  --ios-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* --- Couleurs fonctionnelles --- */
  --price-green: #157347;
  --gold: #FFD700;
  --success-green: #2ecc71;

  /* --- Couleurs neutres --- */
  --pure-black: #000000;
  --pure-white: #ffffff;
  --neutral-light: #f8f9fa;       /* fond clair Bootstrap-compatible */
  --neutral-border: #e9ecef;      /* bordures légères */
  --neutral-muted: #6c757d;       /* texte atténué */
  --neutral-dark: #333333;        /* texte sombre générique */

  /* --- Ombres standardisées --- */
  --shadow-light: rgba(0, 0, 0, 0.08);
  --shadow-medium: rgba(0, 0, 0, 0.12);
  --shadow-dark: rgba(0, 0, 0, 0.2);
  --shadow-heavy: rgba(0, 0, 0, 0.4);

  /* --- Transparences utiles --- */
  --white-translucent: rgba(255, 255, 255, 0.95);
  --white-glass: rgba(255, 255, 255, 0.8);
  --white-subtle: rgba(255, 255, 255, 0.1);
  --black-overlay: rgba(0, 0, 0, 0.6);
  --black-subtle: rgba(0, 0, 0, 0.05);

  /* --- Couleurs pour les graphiques --- */
  --chart-beige: #E9E4D9;
  --chart-brown: #4A453C;
  --chart-gray: #8B8579;
  --chart-red: #ff6384;
  --chart-blue: #36a2eb;
  --chart-yellow: #ffce56;
  --chart-teal: #4bc0c0;
  --chart-purple: #9966ff;
}

/* ==========================================================================
   2. THEME CLAIR — Palette Chaude "Automne"
   ========================================================================== */
:root {
  /* Textes */
  --text-primary: var(--rich-mahogany);
  --text-secondary: var(--dark-garnet);
  --text-light: var(--pure-white);
  --text-muted: var(--neutral-muted);

  /* Elements interactifs */
  --action-color: var(--rust-brown);
  --action-hover: var(--dark-garnet);
  --border-color: var(--bronze);

  /* Couleurs fonctionnelles */
  --price-color: var(--price-green);
  --gold-color: var(--gold);
  --success-color: var(--success-green);
  --error-color: var(--ios-red);
  --warning-color: #ffc107;
  --warning-bg: #fff3cd;

  /* Fonds */
  --bg-primary: var(--pure-white);
  --bg-secondary: var(--neutral-light);
  --beige-bg: #F1EDE3;
  --beige-bg-light: #F9F7F2;

  /* Graphiques */
  --chart-bg: var(--chart-beige);
  --chart-text: var(--chart-brown);
  --chart-text-secondary: var(--chart-gray);

  /* Badges et etats */
  --success-bg: #e8f5e9;
  --success-border: #c8e6c9;
  --success-text: #2e7d32;
  --secondary-bg: var(--neutral-light);
  --secondary-color: #616161;
  --secondary-border: #e0e0e0;

  /* Transparences thematiques */
  --error-transparent: rgba(255, 59, 48, 0.15);
  --warning-transparent: rgba(255, 193, 7, 0.2);
  --bronze-transparent: rgba(213, 137, 54, 0.1);
  --teal-transparent: rgba(13, 231, 172, 0.1);
  --danger-transparent: rgba(255, 59, 48, 0.05);

  /* Ombres */
  --shadow-primary: var(--shadow-light);
  --shadow-secondary: var(--shadow-medium);
  --shadow-tertiary: var(--shadow-dark);

  /* Gradient de fond */
  --bg-gradient: linear-gradient(180deg, var(--vanilla-custard) 0%, var(--pure-white) 100%);
  --bg-fallback: var(--vanilla-custard);
}

/* ==========================================================================
   3. THEME SOMBRE — "Aurora"
   ========================================================================== */
[data-theme="dark"] {
  /* Textes */
  --text-primary: var(--vanilla-custard);
  --text-secondary: var(--bronze);
  --text-light: var(--pure-white);
  --text-muted: rgba(242, 243, 174, 0.6);

  /* Elements interactifs */
  --action-color: var(--bronze);
  --action-hover: var(--vanilla-custard);
  --border-color: var(--rust-brown);

  /* Couleurs fonctionnelles */
  --price-color: var(--aurora-teal);
  --gold-color: var(--bronze);
  --success-color: var(--aurora-teal);
  --error-color: var(--ios-red);
  --warning-color: rgba(255, 193, 7, 0.8);
  --warning-bg: rgba(255, 193, 7, 0.1);

  /* Fonds */
  --bg-primary: var(--cosmic-blue);
  --bg-secondary: var(--dark-void);
  --beige-bg: var(--cosmic-blue);
  --beige-bg-light: var(--dark-void);

  /* Graphiques */
  --chart-bg: var(--cosmic-blue);
  --chart-text: var(--vanilla-custard);
  --chart-text-secondary: var(--bronze);

  /* Badges et etats */
  --success-bg: rgba(13, 231, 172, 0.1);
  --success-border: rgba(13, 231, 172, 0.3);
  --success-text: var(--aurora-teal);
  --secondary-bg: rgba(196, 51, 235, 0.1);
  --secondary-color: var(--aurora-purple);
  --secondary-border: rgba(196, 51, 235, 0.3);

  /* Transparences thematiques */
  --error-transparent: rgba(255, 59, 48, 0.3);
  --warning-transparent: rgba(255, 193, 7, 0.4);
  --bronze-transparent: rgba(213, 137, 54, 0.15);
  --teal-transparent: rgba(13, 231, 172, 0.15);
  --danger-transparent: rgba(255, 59, 48, 0.1);

  /* Ombres */
  --shadow-primary: rgba(0, 0, 0, 0.15);
  --shadow-secondary: rgba(0, 0, 0, 0.25);
  --shadow-tertiary: rgba(0, 0, 0, 0.4);

  /* Gradient de fond Aurora */
  --bg-gradient:
    radial-gradient(circle at 10% 20%, var(--aurora-purple) 0%, transparent 40%),
    radial-gradient(circle at 40% 10%, var(--aurora-teal) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, var(--nebula-indigo) 0%, transparent 50%),
    var(--dark-void);
  --bg-fallback: var(--dark-void);
}

/* ==========================================================================
   4. STYLES GLOBAUX
   ========================================================================== */
html, body {
  height: 100%;
  margin: 0;
}

body {
  background-color: var(--bg-fallback);
  background-image: var(--bg-gradient);
  background-attachment: fixed;
  background-size: cover;
  color: var(--text-primary);
  font-family: var(--ios-font);
  transition: color 0.3s ease;
}

a { color: var(--action-color); text-decoration: none; }
a:hover { color: var(--action-hover); }