/* ===== DESIGN TOKENS — LiveConseil v23 ===== */

/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Palette sombre (identite dark affinee) */
  --color-bg-primary: #0b1220;
  --color-bg-secondary: #141c2f;
  --color-bg-elevated: #1a2541;
  --color-bg-hover: #1f2d4d;
  --color-border: #243050;
  --color-border-subtle: #1a2440;

  /* Texte */
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-dim: #475569;

  /* Accents (identite Tactidis) */
  --color-accent-blue: #1e40af;
  --color-accent-teal: #0e7490;
  --gradient-primary: linear-gradient(135deg, #1e40af 0%, #0e7490 100%);

  /* States */
  --color-success: #22c55e;
  --color-success-bg: rgba(34, 197, 94, 0.1);
  --color-warning: #f59e0b;
  --color-warning-bg: rgba(245, 158, 11, 0.1);
  --color-danger: #ef4444;
  --color-danger-bg: rgba(239, 68, 68, 0.1);
  --color-info: #3b82f6;

  /* Espacement */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* Typographie */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Menlo', monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.5rem;
  --fs-3xl: 1.875rem;

  --lh-tight: 1.2;
  --lh-snug: 1.4;
  --lh-normal: 1.6;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;

  /* Shadows (profondeur en dark) */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.6);
  --shadow-glow: 0 0 0 1px rgba(30, 64, 175, 0.4), 0 4px 16px rgba(30, 64, 175, 0.2);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Light mode override */
@media (prefers-color-scheme: light) {
  :root {
    --color-bg-primary: #f8fafc;
    --color-bg-secondary: #f1f5f9;
    --color-bg-elevated: #ffffff;
    --color-bg-hover: #e2e8f0;
    --color-border: #e2e8f0;
    --color-border-subtle: #f1f5f9;

    --color-text-primary: #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-text-dim: #94a3b8;

    --color-success-bg: rgba(34, 197, 94, 0.08);
    --color-warning-bg: rgba(245, 158, 11, 0.08);
    --color-danger-bg: rgba(239, 68, 68, 0.08);

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px -2px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 24px -6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
    --shadow-glow: 0 0 0 1px rgba(30, 64, 175, 0.2), 0 4px 16px rgba(30, 64, 175, 0.1);
  }
}

/* ===== UNIFIED COMPONENTS ===== */

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 10px 18px;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font-sans);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
  text-decoration: none;
  line-height: var(--lh-snug);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
}

.btn-lg { padding: 14px 24px; font-size: var(--fs-base); }
.btn-sm { padding: 6px 12px; font-size: var(--fs-xs); }
.btn-icon-only { padding: 8px; width: 36px; height: 36px; }

/* --- Inputs --- */
.input, .select, .textarea {
  width: 100%;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  background: var(--color-bg-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  line-height: var(--lh-normal);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:hover, .select:hover { border-color: #2d3d5e; }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--color-accent-blue);
  box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.15);
}
.input:disabled, .select:disabled {
  background: var(--color-bg-primary);
  color: var(--color-text-dim);
  cursor: not-allowed;
}

/* --- Cards --- */
.card {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: all var(--transition-base);
}
.card-hover:hover {
  border-color: #2d3d5e;
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card-interactive { cursor: pointer; }
.card-interactive:active { transform: scale(0.995); }

/* --- Badges --- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  font-size: var(--fs-xs);
  font-weight: 500;
  border-radius: 999px;
  line-height: var(--lh-snug);
}
.badge-success { background: var(--color-success-bg); color: var(--color-success); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.badge-neutral { background: var(--color-bg-secondary); color: var(--color-text-secondary); }
.badge-info { background: rgba(59,130,246,0.1); color: var(--color-info); }

/* --- Modal animation --- */
@keyframes modal-enter {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes modal-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* --- Focus visible --- */
:focus-visible {
  outline: 2px solid rgba(30, 64, 175, 0.6);
  outline-offset: 2px;
}
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible) {
  outline: none;
}

/* --- Scrollbar custom --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-dim); }