/* ====================================================================
   ASLANE — Tokens design officiels
   Source : charte graphique aslane.fr
   ==================================================================== */

:root {
  /* === Palette primaire ASLANE === */
  --color-primary: #D90429;           /* Rouge ASLANE (couleur principale du site) */
  --color-primary-hover: #B0021F;
  --color-primary-active: #8B011A;
  --color-primary-dark: #b80322;
  --color-primary-light: #fcdce0;
  --color-primary-50: #fef2f3;

  --color-secondary: #1e3a8a;          /* Bleu marine ASLANE */
  --color-secondary-hover: #1E40AF;
  --color-secondary-dark: #172a5f;
  --color-secondary-light: #dbe4f8;

  /* === Slate (nav + headers) === */
  --color-slate-900: #0F172A;
  --color-slate-800: #1E293B;
  --color-slate-700: #334155;
  --color-slate-600: #475569;
  --color-slate-500: #64748B;
  --color-slate-100: #F1F5F9;
  --color-slate-50: #F8FAFC;

  /* === Couleurs sémantiques === */
  --color-success: #10b981;
  --color-success-light: #d1fae5;
  --color-success-dark: #047857;

  --color-danger: #991B1B;            /* Rouge bordeaux (danger/refuser/supprimer) */
  --color-danger-hover: #7F1D1D;
  --color-danger-light: #fee2e2;
  --color-danger-dark: #b91c1c;

  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-dark: #b45309;

  --color-info: #3b82f6;
  --color-info-light: #dbeafe;
  --color-info-dark: #1e40af;

  /* === Gris neutres === */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;

  /* === Background et surfaces === */
  --bg-page: #F8FAFC;
  --bg-card: #ffffff;
  --bg-sidebar: #0F172A; /* slate-900 — bleu nuit (refonte UI) */
  --bg-header: var(--color-slate-900);  /* IMPORTANT : tous les headers de page en slate-900 */
  --bg-input: #FFFFFF;
  --bg-input-disabled: #F1F5F9;

  /* === Sidebar bleu nuit (refonte UI) === */
  --sidebar-bg: #0F172A;            /* slate-900 */
  --sidebar-bg-hover: #1E293B;      /* slate-800 */
  --sidebar-bg-active: #D90429;     /* rouge ASLANE pour item actif */
  --sidebar-text: #E2E8F0;          /* slate-200 — texte clair */
  --sidebar-text-muted: #94A3B8;    /* slate-400 — texte secondaire */
  --sidebar-text-active: #FFFFFF;   /* blanc sur fond actif */
  --sidebar-border: #1E293B;
  --sidebar-icon-color: #CBD5E1;    /* slate-300 — icônes */
  --sidebar-icon-active: #FFFFFF;
  --sidebar-section-label: #64748B; /* slate-500 — labels de section */

  /* === Texte === */
  --text-on-slate: #FFFFFF;
  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;

  /* === Bordures === */
  --border-color: var(--color-gray-200);
  --border-color-strong: var(--color-gray-300);
  --border-default: #E2E8F0;
  --border-input: #CBD5E1;
  --border-input-focus: var(--color-primary);

  /* === Typographie === */
  --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, monospace;

  /* Tailles texte */
  --text-xs: 0.75rem;     /* 12px */
  --text-sm: 0.875rem;    /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg: 1.125rem;    /* 18px */
  --text-xl: 1.25rem;     /* 20px */
  --text-2xl: 1.5rem;     /* 24px */
  --text-3xl: 1.875rem;   /* 30px */
  --text-4xl: 2.25rem;    /* 36px */

  /* Poids */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line height */
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* === Espacements === */
  --space-1: 0.25rem;     /* 4px */
  --space-2: 0.5rem;      /* 8px */
  --space-3: 0.75rem;     /* 12px */
  --space-4: 1rem;        /* 16px */
  --space-5: 1.25rem;     /* 20px */
  --space-6: 1.5rem;      /* 24px */
  --space-8: 2rem;        /* 32px */
  --space-10: 2.5rem;     /* 40px */
  --space-12: 3rem;       /* 48px */

  /* === Border radius === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* === Shadows === */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);

  /* === Aliases pour la rétro-compatibilité === */
  --danger: var(--color-danger);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --info: var(--color-info);
  --primary: var(--color-primary);
  --secondary: var(--color-secondary);

  /* === Transitions === */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* === Z-index échelle (cf. AUDIT_BUGS_UI.md §2.4)
     Utilisez ces variables au lieu de valeurs littérales pour éviter
     les conflits de superposition. Ordre du bas (z-base) au haut (z-floating). */
  --z-base:             1;     /* Contenu normal */
  --z-dropdown:       100;     /* Menus déroulants, autocomplete */
  --z-sticky:        1000;     /* Headers/columns sticky */
  --z-overlay:       9000;     /* Backdrop des modales/drawers */
  --z-modal:        10000;     /* Boîtes de dialogue */
  --z-toast:        11000;     /* Notifications toast (au-dessus des modales) */
  --z-floating:     12000;     /* Barre flottante admin (top-right) */
}

/* === Reset et bases === */
html {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading-normal);
  color: var(--color-gray-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--color-gray-900);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--color-gray-900);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-base); }
h6 { font-size: var(--text-sm); }

/* === Liens === */
a, .link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover, .link:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* Boutons et liens d'action ne doivent pas être sous-lignés */
a.btn,
a.btn:hover,
.snav-link,
.snav-link:hover {
  text-decoration: none;
}

/* === Formulaires (defaults) === */
input, textarea, select {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-gray-900);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: #ffffff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-50);
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  padding: 0;
  accent-color: var(--color-primary);
}

label {
  font-family: var(--font-body);
  font-weight: var(--font-medium);
  color: var(--color-gray-700);
  display: block;
  margin-bottom: var(--space-1);
}