/* ============================================================
   main.css — Variables, reset, typographie
   Broadpeak CRM Design System
   ============================================================ */

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

/* ── Variables ── */
:root {
  --color-navy:       #0A1628;
  --color-navy2:      #0D1F3C;
  --color-navy3:      #112240;

  --color-blue:       #1a56db;
  --color-blue-hover: #2563eb;
  --color-cyan:       #06b6d4;
  --color-green:      #38a169;
  --color-red:        #e53e3e;
  --color-orange:     #ed8936;
  --color-purple:     #7c3aed;
  --color-yellow:     #d69e2e;

  --color-white:      #ffffff;
  --color-gray50:     #f8fafc;
  --color-gray100:    #f1f5f9;
  --color-gray200:    #e2e8f0;
  --color-gray400:    #94a3b8;
  --color-gray600:    #475569;
  --color-gray800:    #1e293b;

  /* Surfaces sombres */
  --surface-base:     rgba(255,255,255,.04);
  --surface-hover:    rgba(255,255,255,.07);
  --surface-active:   rgba(26,86,219,.2);
  --border-dark:      rgba(255,255,255,.08);
  --border-dark-hover:rgba(255,255,255,.18);

  /* Texte sombre */
  --text-primary:     #ffffff;
  --text-secondary:   rgba(255,255,255,.55);
  --text-muted:       rgba(255,255,255,.3);

  /* Surfaces claires */
  --surface-light:    #ffffff;
  --surface-light2:   var(--color-gray50);
  --border-light:     var(--color-gray200);
  --text-dark:        var(--color-gray800);
  --text-dark2:       var(--color-gray600);

  /* Icones */
  --icon-blue:        rgba(26,86,219,.2);
  --icon-cyan:        rgba(6,182,212,.15);
  --icon-purple:      rgba(124,58,237,.2);
  --icon-orange:      rgba(237,137,54,.15);
  --icon-green:       rgba(56,161,105,.15);
  --icon-red:         rgba(229,62,62,.15);
  --icon-gray:        rgba(255,255,255,.06);

  /* Accents */
  --accent-blue:      linear-gradient(90deg, #1a56db, #06b6d4);
  --accent-cyan:      #06b6d4;
  --accent-purple:    #7c3aed;
  --accent-orange:    #ed8936;
  --accent-green:     #38a169;
  --accent-red:       #e53e3e;
  --accent-gray:      rgba(255,255,255,.15);

  /* Layout */
  --nav-height:       56px;
  --sidebar-width:    240px;
  --radius-sm:        8px;
  --radius-md:        10px;
  --radius-lg:        12px;
  --radius-xl:        16px;

  /* Shadows */
  --shadow-sm:        0 2px 8px rgba(0,0,0,.12);
  --shadow-md:        0 4px 24px rgba(0,0,0,.18);
  --shadow-lg:        0 8px 40px rgba(0,0,0,.25);

  /* Fonts */
  --font-head: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Courier New', monospace;

  /* Transitions */
  --transition: all .15s ease;
}

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

html { font-size: 16px; }

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

a { text-decoration: none; color: inherit; }
button { font-family: var(--font-body); cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: var(--font-body); }
img, svg { display: block; max-width: 100%; }

/* ── Typographie ── */
h1 { font-family: var(--font-head); font-weight: 800; font-size: 1.75rem; line-height: 1.15; }
h2 { font-family: var(--font-head); font-weight: 700; font-size: 1.375rem; line-height: 1.2; }
h3 { font-family: var(--font-head); font-weight: 700; font-size: 1.0625rem; }

p { line-height: 1.6; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ── Animations ── */
@keyframes pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(56,161,105,.2); }
  50%      { box-shadow: 0 0 0 6px rgba(56,161,105,.07); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}