/* ─────────────────────────────────────────────────────────────────────────────
   themes.css — Palette : Composition Colorimétrique
   Variables CSS globales — thème sombre par défaut
   © Code propriétaire — Tous droits réservés.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* ── Fonds ─────────────────────────────────────────────────────── */
  --bg-app:        #0d0d12;
  --bg-surface:    #14141d;
  --bg-surface-2:  #1c1c28;
  --bg-surface-3:  #252535;
  --bg-hover:      #2d2d42;

  /* ── Bordures ──────────────────────────────────────────────────── */
  --border:         #252538;
  --border-subtle:  #1a1a28;
  --border-strong:  #3a3a55;

  /* ── Texte ─────────────────────────────────────────────────────── */
  --text-primary:  #e8e8f2;
  --text-muted:    #7070a0;
  --text-faint:    #454565;

  /* ── Accent ─────────────────────────────────────────────────────── */
  --accent:           #6c63ff;
  --accent-hover:     #7e77ff;
  --accent-subtle:    rgba(108, 99, 255, 0.12);
  --accent-subtle-2:  rgba(108, 99, 255, 0.20);

  /* ── Sémantique ─────────────────────────────────────────────────── */
  --color-success: #4ade80;
  --color-warning: #fbbf24;
  --color-error:   #f87171;

  /* ── Typographie ────────────────────────────────────────────────── */
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code',
               Consolas, 'Courier New', monospace;

  /* ── Espacement ──────────────────────────────────────────────────── */
  --s-1: 3.6px;
  --s-2: 7.2px;
  --s-3: 10.8px;
  --s-4: 14.4px;
  --s-5: 18px;
  --s-6: 21.6px;
  --s-8: 28.8px;
  --s-10: 36px;
  --s-12: 43.2px;

  /* ── Arrondis ────────────────────────────────────────────────────── */
  --r-sm:   3.6px;
  --r-md:   7.2px;
  --r-lg:   10.8px;
  --r-xl:   14.4px;
  --r-2xl:  21.6px;
  --r-full: 9999px;

  /* ── Transitions ─────────────────────────────────────────────────── */
  --t-fast: 100ms ease;
  --t-base: 180ms ease;
  --t-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Ombres ──────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.7), 0 4px 8px rgba(0, 0, 0, 0.4);

  /* ── Dimensions ──────────────────────────────────────────────────── */
  --menubar-h:   47px;
  --sidebar-w:   260px;
  --palette-h:   387px;
  --wheel-size:  234px;

  /* ── Fonds spéciaux ──────────────────────────────────────────────────────────── */
  --bg-menubar:  #0b0b10;
  --bg-panel:    #13131c;
}

/* ── Thème Clair (Light Mode) ────────────────────────────────────────────────── */
html[data-theme="light"] {
  color-scheme: light;
  --bg-app:        #f4f4f8;
  --bg-surface:    #ffffff;
  --bg-surface-2:  #eaeaf2;
  --bg-surface-3:  #dcdce8;
  --bg-hover:      #cecee0;

  --border:         #d0d0e0;
  --border-subtle:  #e2e2f0;
  --border-strong:  #b0b0cc;

  --text-primary:  #181825;
  --text-muted:    #555577;
  --text-faint:    #8888aa;

  --bg-menubar:  #e0e0ec;
  --bg-panel:    #f8f8fc;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    color-scheme: light;
    --bg-app:        #f4f4f8;
    --bg-surface:    #ffffff;
    --bg-surface-2:  #eaeaf2;
    --bg-surface-3:  #dcdce8;
    --bg-hover:      #cecee0;

    --border:         #d0d0e0;
    --border-subtle:  #e2e2f0;
    --border-strong:  #b0b0cc;

    --text-primary:  #181825;
    --text-muted:    #555577;
    --text-faint:    #8888aa;

    --bg-menubar:  #e0e0ec;
    --bg-panel:    #f8f8fc;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  }
}