@tailwind base;
@tailwind components;
@tailwind utilities;

/* =====================================================================
   SPB Cloud v3 — "Aurora" design tokens
   Surfaces sémantiques (triplets RGB pour permettre /alpha) + accent
   dynamique (data-accent) + densité (data-density) + mouvement (data-motion)
   ===================================================================== */

/* ---------- Accent presets (RGB triplets) ---------- */
:root,
html[data-accent="aurore"] {
  --accent-50: 238 242 255; --accent-100: 224 231 255; --accent-200: 199 210 254;
  --accent-300: 165 180 252; --accent-400: 129 140 248; --accent-500: 99 102 241;
  --accent-600: 79 70 229;  --accent-700: 67 56 202;   --accent-800: 55 48 163;
  --accent-900: 49 46 129;  --accent-950: 30 27 75;
}
html[data-accent="ocean"] {
  --accent-50: 239 246 255; --accent-100: 219 234 254; --accent-200: 191 219 254;
  --accent-300: 147 197 253; --accent-400: 96 165 250; --accent-500: 59 130 246;
  --accent-600: 37 99 235;  --accent-700: 29 78 216;   --accent-800: 30 64 175;
  --accent-900: 30 58 138;  --accent-950: 23 37 84;
}
html[data-accent="glacier"] {
  --accent-50: 236 254 255; --accent-100: 207 250 254; --accent-200: 165 243 252;
  --accent-300: 103 232 249; --accent-400: 34 211 238; --accent-500: 6 182 212;
  --accent-600: 8 145 178;  --accent-700: 14 116 144;  --accent-800: 21 94 117;
  --accent-900: 22 78 99;   --accent-950: 8 51 68;
}
html[data-accent="foret"] {
  --accent-50: 236 253 245; --accent-100: 209 250 229; --accent-200: 167 243 208;
  --accent-300: 110 231 183; --accent-400: 52 211 153; --accent-500: 16 185 129;
  --accent-600: 5 150 105;  --accent-700: 4 120 87;    --accent-800: 6 95 70;
  --accent-900: 6 78 59;    --accent-950: 2 44 34;
}
html[data-accent="corail"] {
  --accent-50: 255 241 242; --accent-100: 255 228 230; --accent-200: 254 205 211;
  --accent-300: 253 164 175; --accent-400: 251 113 133; --accent-500: 244 63 94;
  --accent-600: 225 29 72;  --accent-700: 190 18 60;   --accent-800: 159 18 57;
  --accent-900: 136 19 55;  --accent-950: 76 5 25;
}
html[data-accent="ambre"] {
  --accent-50: 255 251 235; --accent-100: 254 243 199; --accent-200: 253 230 138;
  --accent-300: 252 211 77; --accent-400: 251 191 36;  --accent-500: 245 158 11;
  --accent-600: 217 119 6;  --accent-700: 180 83 9;    --accent-800: 146 64 14;
  --accent-900: 120 53 15;  --accent-950: 69 26 3;
}
html[data-accent="amethyste"] {
  --accent-50: 245 243 255; --accent-100: 237 233 254; --accent-200: 221 214 254;
  --accent-300: 196 181 253; --accent-400: 167 139 250; --accent-500: 139 92 246;
  --accent-600: 124 58 237; --accent-700: 109 40 217;  --accent-800: 91 33 182;
  --accent-900: 76 29 149;  --accent-950: 46 16 101;
}

/* ---------- LIGHT (défaut) ---------- */
:root {
  --canvas: 245 246 248;      /* fond de l'app */
  --surface: 255 255 255;     /* cartes, panneaux */
  --elevated: 255 255 255;    /* popovers, modales */
  --line: 226 230 235;        /* bordures */

  --background: rgb(var(--canvas));
  --foreground: #0f172a;
  --bg-sidebar: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f3f6;
  --bg-input: #f1f3f6;
  --bg-overlay: rgba(15, 23, 42, 0.45);
  --border-primary: #e2e6eb;
  --border-secondary: #c8cdd5;
  --text-primary: #0f172a;
  --text-secondary: #3a404b;
  --text-muted: #6b7280;
  --text-dimmed: #9aa1ad;
  --toast-bg: #ffffff;
  --toast-color: #0f172a;
  --toast-border: rgba(15, 23, 42, 0.08);
  --toast-shadow: 0 12px 40px -8px rgba(15, 23, 42, 0.25);

  --row-py: 0.625rem; /* densité confortable */
  color-scheme: light;
}

/* ---------- DARK "obsidienne" ---------- */
.dark {
  --canvas: 10 11 16;
  --surface: 18 19 26;
  --elevated: 24 26 35;
  --line: 40 43 54;

  --background: rgb(var(--canvas));
  --foreground: #ededed;
  --bg-sidebar: rgb(var(--canvas));
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-hover: rgba(255, 255, 255, 0.08);
  --bg-input: rgba(255, 255, 255, 0.05);
  --bg-overlay: rgba(0, 0, 0, 0.65);
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(255, 255, 255, 0.16);
  --text-primary: #ffffff;
  --text-secondary: #e5e7eb;
  --text-muted: #9aa1ad;
  --text-dimmed: #6b7280;
  --toast-bg: #181a23;
  --toast-color: #e5e7eb;
  --toast-border: rgba(255, 255, 255, 0.08);
  --toast-shadow: 0 12px 40px -8px rgba(0, 0, 0, 0.7);
  color-scheme: dark;
}

html[data-density="compact"] { --row-py: 0.375rem; }

/* ---------- Base ---------- */
html {
  overscroll-behavior: none;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: var(--font-geist), "Inter", system-ui, -apple-system, sans-serif;
  font-feature-settings: "cv11", "ss01", "ss03";
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgb(var(--accent-500) / 0.25);
}

/* Réduction des animations (préférence utilisateur ou système) */
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* ---------- Mobile safe areas ---------- */
.safe-top { padding-top: env(safe-area-inset-top, 0); }
.pb-safe { padding-bottom: env(safe-area-inset-bottom, 0); }
.pb-tabbar { padding-bottom: calc(4rem + env(safe-area-inset-bottom, 0)); }
@media (min-width: 1024px) { .pb-tabbar { padding-bottom: 0; } }

/* ---------- Composants (surchargeables par les utilitaires Tailwind : pl-10, rounded-*, etc.) ---------- */
@layer components {
  /* Carte standard */
  .card {
    @apply bg-surface border border-line rounded-2xl shadow-card dark:shadow-none dark:border-white/[0.07];
  }
  .card-hover {
    @apply transition-all duration-200 hover:shadow-card-hover hover:-translate-y-px dark:hover:bg-white/[0.03] dark:hover:border-white/[0.12];
  }

  /* Verre (barres flottantes, popovers, palette) */
  .glass {
    background: rgb(var(--elevated) / 0.9);
    -webkit-backdrop-filter: saturate(160%) blur(18px);
    backdrop-filter: saturate(160%) blur(18px);
    border: 1px solid rgb(var(--line) / 0.9);
  }
  .dark .glass { border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.05); }

  /* Champ de saisie standard */
  .field {
    @apply w-full bg-gray-100 dark:bg-white/5 border border-gray-200 dark:border-white/10 rounded-xl px-3.5 py-2.5 text-sm text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-gray-500 transition-all duration-200;
    @apply focus:outline-none focus:border-blue-500/60 focus:ring-4 focus:ring-blue-500/10 dark:focus:ring-blue-500/15;
  }

  /* Texte dégradé d'accent */
  .text-accent-gradient {
    background: linear-gradient(120deg, rgb(var(--accent-500)), rgb(var(--accent-700)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .dark .text-accent-gradient {
    background: linear-gradient(120deg, rgb(var(--accent-300)), rgb(var(--accent-500)));
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* Ligne d'explorateur : padding piloté par la densité */
  .density-row { padding-top: var(--row-py); padding-bottom: var(--row-py); }

  /* Anneau de cible au dépôt */
  .drop-target {
    @apply ring-2 ring-blue-500 ring-offset-2 ring-offset-canvas bg-blue-500/10;
  }
}

/* ---------- Utilities ---------- */
@layer utilities {
  .touch-target { min-width: 44px; min-height: 44px; }
  .scrollbar-none { scrollbar-width: none; }
  .scrollbar-none::-webkit-scrollbar { display: none; }
  .scrollbar-thin { scrollbar-width: thin; }
}

/* Interactions tactiles */
button, a, [role="button"] { -webkit-touch-callout: none; user-select: none; }
button:active, a:active, [role="button"]:active { opacity: 0.9; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
@media (max-width: 768px) { ::-webkit-scrollbar { width: 3px; height: 3px; } }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgb(128 128 128 / 0.28); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgb(128 128 128 / 0.5); border: 2px solid transparent; background-clip: padding-box; }

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

/* Skeleton shimmer */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
.animate-shimmer {
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.35) 50%, transparent 75%);
  background-size: 200% 100%;
  animation: shimmer 1.6s infinite;
}
.dark .animate-shimmer {
  background: linear-gradient(90deg, transparent 25%, rgba(255, 255, 255, 0.07) 50%, transparent 75%);
  background-size: 200% 100%;
}

/* Page transitions (legacy) */
.page-enter { opacity: 0; transform: translateY(8px); }
.page-enter-active { opacity: 1; transform: translateY(0); transition: all 0.3s ease; }

/* Drop zone */
.drop-active {
  border-color: rgb(var(--accent-500)) !important;
  background-color: rgb(var(--accent-500) / 0.06) !important;
}

/* Modale plein écran mobile (legacy) */
@media (max-width: 640px) {
  .mobile-full-modal {
    width: 100vw !important; max-width: 100vw !important; min-height: 50vh;
    border-radius: 1rem 1rem 0 0 !important; margin: 0; position: fixed; bottom: 0; left: 0; right: 0;
  }
}

/* Selects natifs */
select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem;
}

/* Kbd */
kbd {
  font-family: var(--font-geist), system-ui, sans-serif;
  font-size: 11px; line-height: 1;
  padding: 3px 6px; border-radius: 6px;
  border: 1px solid rgb(var(--line));
  background: rgb(var(--surface));
  color: var(--text-muted);
  box-shadow: 0 1px 0 rgb(var(--line));
}
.dark kbd { border-color: rgba(255,255,255,0.12); background: rgba(255,255,255,0.06); box-shadow: 0 1px 0 rgba(255,255,255,0.08); }

/* Prose minimal (l'assistant IA rend du Markdown ; pas de plugin typography) */
.prose { color: inherit; line-height: 1.6; }
.prose p { margin: 0.35em 0; }
.prose ul, .prose ol { margin: 0.4em 0; padding-left: 1.25em; }
.prose ul { list-style: disc; } .prose ol { list-style: decimal; }
.prose li { margin: 0.15em 0; }
.prose h1, .prose h2, .prose h3, .prose h4 { font-weight: 600; margin: 0.6em 0 0.3em; line-height: 1.3; }
.prose h1 { font-size: 1.15em; } .prose h2 { font-size: 1.08em; } .prose h3 { font-size: 1.02em; }
.prose blockquote { border-left: 3px solid rgb(var(--accent-500) / 0.5); padding-left: 0.75em; margin: 0.4em 0; color: var(--text-muted); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.85em; margin: 0.5em 0; }
.prose th, .prose td { border: 1px solid rgb(var(--line)); padding: 4px 8px; text-align: left; }
.prose hr { border-color: rgb(var(--line)); margin: 0.75em 0; }
.prose strong { font-weight: 600; }