/**
 * design-system.css
 * Variables CSS globales, tokens de design et reset CSS minimal.
 * Ne contient aucun style de composant — uniquement des variables et un reset.
 */

/* ============================================================
   CUSTOM PROPERTIES (Design Tokens)
   ============================================================ */
:root {
/* --- Palette de couleurs --- */
  --color-primary:        #2D3748; /* Graphite — brand principal */
  --color-primary-light:  #4A5568; /* Graphite moyen — hover */
  --color-primary-dark:   #1A202C; /* Graphite très foncé — actif */
  --color-primary-bg:     #EDF2F7; /* Graphite très clair — fond sélectionné */

  --color-accent:         #059669; /* Émeraude — CTA, highlights */
  --color-accent-light:   #047857; /* Émeraude moyen — hover CTA */
  --color-accent-dark:    #065F46; /* Émeraude foncé — actif CTA */
  --color-accent-bg:      #ECFDF5; /* Émeraude très clair — fond badge */

  --color-bg:             #FAFAF8; /* Fond général (crème subtil) */
  --color-surface:        #FFFFFF; /* Cards, panels */
  --color-surface-raised: #FFFFFF; /* Modals, dropdowns */
  --color-border:         #E8E8E3; /* Séparateurs */
  --color-border-strong:  #D4D4CE; /* Bordures actives */

  --color-text:           #1C1C1A; /* Texte principal */
  --color-text-muted:     #71716B; /* Texte secondaire */
  --color-text-inverse:   #FFFFFF; /* Texte sur fond sombre */
  --color-text-disabled:  #A3A39D; /* Texte désactivé */

  --color-success:        #15803D; /* Rentabilité bonne */
  --color-success-bg:     #F0FDF4;
  --color-success-light:  #4ADE80;

  --color-warning:        #CA8A04; /* Rentabilité moyenne */
  --color-warning-bg:     #FEFCE8;
  --color-warning-light:  #FACC15;

  --color-danger:         #DC2626; /* Rentabilité mauvaise */
  --color-danger-bg:      #FEF2F2;
  --color-danger-light:   #F87171;

  --color-info:           #0369A1;
  --color-info-bg:        #F0F9FF;

  /* --- Typographie --- */
  --font-family:          'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono:     'JetBrains Mono', 'Fira Code', monospace;

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

  --font-weight-light:    300;
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight:    1.25;
  --line-height-normal:   1.5;
  --line-height-relaxed:  1.75;

  /* --- Espacements (base 4px) --- */
  --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 */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */

  /* --- Bordures & Rayons --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* --- Ombres --- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.08);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* --- Z-index --- */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-toast:   300;
  --z-tooltip: 400;

  /* --- Sidebar --- */
  --sidebar-width:         240px;
  --sidebar-width-mobile:  280px;
  --header-height:         64px;
}

/* ============================================================
   RESET CSS MINIMAL
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

[hidden] {
  display: none !important;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

button {
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
}

/* Accessibilité — Focus visible */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* Scrollbar custom (Webkit) */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}