/* KARMEO — PWA shell v1.0
   Base reset et scroll natif. */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  -ms-touch-action: pan-y;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  background: var(--k-bg);
  color: var(--k-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

button {
  font: inherit;
  cursor: pointer;
  touch-action: manipulation;
}

input, textarea, select {
  font: inherit;
}

.karmeo-app {
  width: 100%;
  min-height: 100vh;
}

/* ─── Palette mauve KARMEO ─────────────────────────────────────────────── */
:root {
  --k-bg:           #0F0820;   /* Fond très sombre, presque noir violacé */
  --k-bg-soft:      #1A1235;   /* Cards, surfaces légères */
  --k-bg-card:      #221848;   /* Cards actives */
  --k-bg-elevated:  #2D1B5E;   /* Éléments survolés / actifs */

  --k-border:       #3A2870;   /* Bordures standards */
  --k-border-soft:  #2A1D52;   /* Bordures très subtiles */

  --k-primary:      #A78BFA;   /* Mauve principal — lavender */
  --k-primary-bright:#8B5CF6;   /* Mauve profond pour accents */
  --k-primary-glow:  #C4B5FD;  /* Mauve clair pour halos */
  --k-primary-h:     #B79DFF;  /* Hover */

  --k-secondary:    #E9D5FF;   /* Texte secondaire doux */
  --k-text:         #F5F0FF;    /* Texte principal, blanc violacé */
  --k-text-mute:    #9F8EC4;   /* Texte discret */
  --k-text-dim:     #6B5B95;   /* Texte très discret */

  --k-success:      #4ADE80;
  --k-warning:      #FBBF24;
  --k-danger:       #F87171;

  --k-radius:        12px;
  --k-radius-lg:     20px;
  --k-radius-pill:   999px;
  --k-shadow:       0 4px 20px rgba(139, 92, 246, 0.15);
  --k-shadow-glow:  0 0 24px rgba(167, 139, 250, 0.25);
  --k-shadow-card:  0 8px 32px rgba(0, 0, 0, 0.3);

  --k-gradient-primary: linear-gradient(135deg, #8B5CF6 0%, #A78BFA 100%);
  --k-gradient-bg:     radial-gradient(ellipse at top, #221848 0%, #0F0820 60%);
}

/* Forcer le fond mauve sur la page du plugin */
body.karmeo-app,
body.karmeo-app > *:not(.karmeo-modal-overlay):not(.karmeo-toast) {
  background: var(--k-bg) !important;
  color: var(--k-text) !important;
}

/* Mobile : fond gradient subtil */
@media (min-width: 480px) {
  body.karmeo-app {
    background: var(--k-gradient-bg) !important;
  }
}

/* Scrollbar discret */
body.karmeo-app::-webkit-scrollbar { width: 6px; }
body.karmeo-app::-webkit-scrollbar-track { background: transparent; }
body.karmeo-app::-webkit-scrollbar-thumb {
  background: var(--k-border);
  border-radius: 3px;
}