/* ============================================================
   Hexatune Cloud V2 — Design System central
   Nouvelle identité : accent indigo #6366f1, dark + light (coque).
   Injecté sur toutes les pages via includes/sidebar.php.
   N'écrase PAS Tailwind : ajoute des tokens + composants + light shell.
   ============================================================ */

:root {
  /* Accent indigo/violet affiné */
  --hx-accent:        #6366f1;
  --hx-accent-600:    #4f46e5;
  --hx-accent-700:    #4338ca;
  --hx-accent-soft:   rgba(99,102,241,.14);
  --hx-accent-border: rgba(99,102,241,.30);
  --hx-accent-glow:   rgba(99,102,241,.45);

  /* Surfaces DARK (par défaut) */
  --hx-bg:        #07070a;
  --hx-bg-2:      #0d0d12;
  --hx-surface:   rgba(255,255,255,.03);
  --hx-surface-2: rgba(255,255,255,.05);
  --hx-card:      #101015;
  --hx-card-brd:  rgba(255,255,255,.07);
  --hx-text:      #f4f4f5;
  --hx-text-2:    #a1a1aa;
  --hx-text-3:    #71717a;
  --hx-radius:    16px;
  --hx-shadow:    0 8px 30px rgba(0,0,0,.45);

  color-scheme: dark;
}

/* ── LIGHT (coque) : auto via OS, surchargé par le toggle [data-theme] ── */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --hx-bg:        #f6f7fb;
    --hx-bg-2:      #eef0f6;
    --hx-surface:   rgba(15,18,30,.03);
    --hx-surface-2: rgba(15,18,30,.05);
    --hx-card:      #ffffff;
    --hx-card-brd:  rgba(15,18,30,.10);
    --hx-text:      #121420;
    --hx-text-2:    #4b5066;
    --hx-text-3:    #80869c;
    --hx-shadow:    0 8px 30px rgba(40,45,80,.12);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --hx-bg:        #f6f7fb;
  --hx-bg-2:      #eef0f6;
  --hx-surface:   rgba(15,18,30,.03);
  --hx-surface-2: rgba(15,18,30,.05);
  --hx-card:      #ffffff;
  --hx-card-brd:  rgba(15,18,30,.10);
  --hx-text:      #121420;
  --hx-text-2:    #4b5066;
  --hx-text-3:    #80869c;
  --hx-shadow:    0 8px 30px rgba(40,45,80,.12);
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }

/* ── Typo moderne ── */
.hx-font, .hx-heading { font-family: 'Space Grotesk','Inter',system-ui,sans-serif; }
body { font-feature-settings: "cv02","cv03","cv04","cv11"; }

/* ── Transition douce light/dark sur la coque ── */
.hx-themed, .hx-card, .hx-btn, aside[id^="hx-"], header { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }

/* ── Composants épurés (opt-in via classes) ── */
.hx-card {
  background: var(--hx-card);
  border: 1px solid var(--hx-card-brd);
  border-radius: var(--hx-radius);
  box-shadow: var(--hx-shadow);
  color: var(--hx-text);
}
.hx-glass {
  background: var(--hx-surface);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid var(--hx-card-brd);
  border-radius: var(--hx-radius);
}
.hx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font-weight:700; border-radius:12px; padding:.6rem 1rem; cursor:pointer;
  background: linear-gradient(135deg, var(--hx-accent), var(--hx-accent-700));
  color:#fff; border:none;
  box-shadow: 0 4px 16px var(--hx-accent-glow);
  transition: transform .12s ease, box-shadow .2s ease, filter .2s ease;
}
.hx-btn:hover { transform: translateY(-1px); filter: brightness(1.06); }
.hx-btn:active { transform: translateY(0); }
.hx-btn-ghost {
  background: var(--hx-accent-soft); color: var(--hx-accent);
  border:1px solid var(--hx-accent-border); box-shadow:none;
}
.hx-chip {
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:999px;
  background: var(--hx-accent-soft); color: var(--hx-accent);
  border:1px solid var(--hx-accent-border);
}

/* ── Accent helpers basés sur la nouvelle couleur (utilisables partout) ── */
.hx-accent       { color: var(--hx-accent) !important; }
.hx-bg-accent    { background: var(--hx-accent) !important; }
.hx-border-accent{ border-color: var(--hx-accent-border) !important; }

/* ── Recolore l'ancien primary violet → nouvel indigo (transition douce d'identité)
      Tailwind CDN génère .bg-primary/.text-primary depuis la config inline de chaque page ;
      on ré-aligne ici la teinte exacte pour homogénéiser tout le panel. ── */
.text-primary { color: var(--hx-accent) !important; }
.bg-primary   { background-color: var(--hx-accent) !important; }
.border-primary { border-color: var(--hx-accent) !important; }
.from-primary { --tw-gradient-from: var(--hx-accent) var(--tw-gradient-from-position) !important;
                --tw-gradient-to: rgba(99,102,241,0) var(--tw-gradient-to-position) !important;
                --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important; }
.hover\:bg-primary\/20:hover { background-color: var(--hx-accent-soft) !important; }

/* ── Light shell : adapter le fond global + cartes zinc quand light actif ── */
:root[data-theme="light"] body,
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) body { } }
:root[data-theme="light"] body { background: var(--hx-bg) !important; color: var(--hx-text); }

/* En light, adoucir les très grands aplats noirs des coques connues */
:root[data-theme="light"] aside#hx-sidebar,
:root[data-theme="light"] aside#hx-mobile-sidebar,
:root[data-theme="light"] header.md\:hidden {
  background: rgba(255,255,255,.92) !important;
  border-color: var(--hx-card-brd) !important;
}
:root[data-theme="light"] aside#hx-sidebar *,
:root[data-theme="light"] header.md\:hidden * { }

/* ── Scrollbars modernes ── */
* { scrollbar-width: thin; scrollbar-color: var(--hx-accent) transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--hx-accent), var(--hx-accent-700)); border-radius: 999px; border:2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Focus visible accessible ── */
:focus-visible { outline: 2px solid var(--hx-accent); outline-offset: 2px; border-radius: 6px; }

/* ── Toggle thème (bouton lune/soleil) ── */
#hx-theme-toggle { cursor:pointer; }

/* ── Micro-animations ── */
@keyframes hxFadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform:none; } }
.hx-fade-up { animation: hxFadeUp .35s cubic-bezier(.16,.84,.44,1) both; }
@keyframes hxPulse { 0%,100%{opacity:1} 50%{opacity:.55} }
.hx-pulse { animation: hxPulse 1.6s ease-in-out infinite; }

/* ── Respecte prefers-reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}