/* ============================================================
   EASY HEALTH (EH) — Charte graphique & tokens de thème
   Couleurs de marque :
     Primaire  #0D6EFD | Secondaire #198754 | Accent #20C997
     Fond      #F8F9FA | Texte      #212529
   ============================================================ */

:root {
  /* --- Palette de marque (constante) --- */
  --eh-primary:        #0D6EFD;
  --eh-primary-rgb:    13, 110, 253;
  --eh-secondary:      #198754;
  --eh-secondary-rgb:  25, 135, 84;
  --eh-accent:         #20C997;
  --eh-accent-rgb:     32, 201, 151;
  --eh-bg-base:        #F8F9FA;
  --eh-text-base:      #212529;

  /* --- Dégradé signature (bleu -> vert) --- */
  --eh-gradient: linear-gradient(135deg, #0D6EFD 0%, #20C997 55%, #198754 100%);
  --eh-gradient-soft: linear-gradient(135deg, rgba(13,110,253,.12), rgba(32,201,151,.12));

  /* --- Tokens sémantiques (thème CLAIR par défaut) --- */
  --eh-body-bg:     #F8F9FA;
  --eh-surface:     #FFFFFF;
  --eh-surface-2:   #F1F4F9;
  --eh-border:      #E2E8F0;
  --eh-text:        #212529;
  --eh-text-muted:  #6B7280;
  --eh-heading:     #0F172A;
  --eh-shadow:      0 8px 30px rgba(15, 37, 64, .08);
  --eh-shadow-sm:   0 2px 10px rgba(15, 37, 64, .06);
  --eh-radius:      14px;
  --eh-radius-sm:   10px;

  --bs-primary:        #0D6EFD;
  --bs-primary-rgb:    13, 110, 253;
}

/* ============================================================
   THÈME SOMBRE
   ============================================================ */
[data-theme="dark"] {
  --eh-body-bg:    #0B1220;
  --eh-surface:    #111A2B;
  --eh-surface-2:  #16223A;
  --eh-border:     #233048;
  --eh-text:       #E6EDF7;
  --eh-text-muted: #93A4BF;
  --eh-heading:    #FFFFFF;
  --eh-shadow:     0 10px 40px rgba(0, 0, 0, .45);
  --eh-shadow-sm:  0 2px 12px rgba(0, 0, 0, .35);
}

/* ============================================================
   BASE
   ============================================================ */
* { box-sizing: border-box; }

body {
  background: var(--eh-body-bg);
  color: var(--eh-text);
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  transition: background-color .3s ease, color .3s ease;
}

h1,h2,h3,h4,h5,h6 { color: var(--eh-heading); }

a { color: var(--eh-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- Boutons de marque --- */
.btn-eh {
  background: var(--eh-gradient);
  border: none;
  color: #fff;
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: 0 6px 18px rgba(13,110,253,.35);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-eh:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(32,201,151,.45); filter: brightness(1.03); }
.btn-eh:active { transform: translateY(0); }

.text-eh-primary   { color: var(--eh-primary) !important; }
.text-eh-secondary { color: var(--eh-secondary) !important; }
.text-eh-accent    { color: var(--eh-accent) !important; }
.bg-eh-gradient    { background: var(--eh-gradient) !important; }

/* --- Cartes --- */
.eh-card {
  background: var(--eh-surface);
  border: 1px solid var(--eh-border);
  border-radius: var(--eh-radius);
  box-shadow: var(--eh-shadow-sm);
}

/* --- Marque texte (wordmark) --- */
.eh-wordmark { font-weight: 800; letter-spacing: .5px; line-height: 1; }
.eh-wordmark .easy   { color: var(--eh-primary); }
.eh-wordmark .health { color: var(--eh-secondary); }

::selection { background: rgba(var(--eh-accent-rgb), .3); }

/* Scrollbar discrète */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(var(--eh-primary-rgb), .35); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: rgba(var(--eh-primary-rgb), .55); }