/* ── Hypnos CRM — Design Tokens ── */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=DM+Sans:wght@300;400;500;600;700&display=swap');

:root {
  /* Couleurs principales */
  --bg-primary:    #0a0a0f;
  --bg-secondary:  #12121a;
  --bg-card:       #16161f;
  --bg-card-hover: #1c1c28;
  --bg-input:      #1a1a25;
  --bg-sidebar:    #0e0e15;

  /* Accent doré */
  --gold:          #c9a96e;
  --gold-light:    #dfc08a;
  --gold-dark:     #a88a50;
  --gold-subtle:   rgba(201, 169, 110, 0.08);
  --gold-border:   rgba(201, 169, 110, 0.15);
  --gold-glow:     rgba(201, 169, 110, 0.25);

  /* Texte */
  --text-primary:  #f0ece4;
  --text-secondary:#9a958d;
  --text-muted:    #5a564f;

  /* Bordures */
  --border:        #1f1f2a;
  --border-light:  #2a2a38;

  /* Sémantique */
  --success:       #34d399;
  --warning:       #fbbf24;
  --danger:        #f87171;
  --info:          #60a5fa;

  /* Rayons */
  --radius-sm:     6px;
  --radius:        10px;
  --radius-lg:     16px;
  --radius-xl:     20px;

  /* Ombres */
  --shadow:        0 4px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg:     0 12px 48px rgba(0, 0, 0, 0.6);
  --shadow-gold:   0 0 30px rgba(201, 169, 110, 0.1);

  /* Typo */
  --font-heading:  'Cormorant Garamond', serif;
  --font-body:     'DM Sans', sans-serif;

  /* Sidebar */
  --sidebar-width: 260px;

  /* Transitions */
  --ease:          cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-light); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-dark); }

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideIn {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.fade-in { animation: fadeIn 0.4s var(--ease) both; }
.slide-in { animation: slideIn 0.3s var(--ease) both; }