/* ================================================================
   variables.css — Palette exacte du prototype myMecanic
   ================================================================ */

:root {
  --bg:       #0d1117;
  --surface:  #161b27;
  --surface-2:#1c2233;
  --border:   #2a3147;
  --text:     #f1f5f9;
  --muted:    #94a3b8;
  --muted-2:  #64748b;
  --primary:   #6366f1;
  --primary-2: #818cf8;
  --primary-hover: #4f46e5;
  --danger:  #ef4444;
  --warning: #f59e0b;
  --success: #10b981;
  --info:    #3b82f6;
  --shadow: 0 4px 24px rgba(0,0,0,.4);
  --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
  --fs-1: 0.8125rem; --fs-2: 0.875rem; --fs-3: 1rem; --fs-4: 1.125rem; --fs-5: 1.375rem;
  --lh: 1.5;
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem;
  --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:3rem;
  --r-1:9px; --r-2:13px; --r-3:16px;
  --sidebar-w: 224px;
  --header-h:  56px;
  --z-header:10; --z-sidebar:20; --z-overlay:100; --z-toast:200;
}

body[data-theme="light"],
[data-theme="light"] {
  --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f8fafc;
  --border:#e2e8f0; --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
  --shadow:0 4px 24px rgba(0,0,0,.08);
}
@media (prefers-color-scheme: light) {
  :root {
    --bg:#f1f5f9; --surface:#ffffff; --surface-2:#f8fafc;
    --border:#e2e8f0; --text:#0f172a; --muted:#64748b; --muted-2:#94a3b8;
    --shadow:0 4px 24px rgba(0,0,0,.08);
  }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }
body {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: var(--lh);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background .3s, color .3s;
}
body[data-theme="light"] { -webkit-font-smoothing: subpixel-antialiased; -moz-osx-font-smoothing: auto; }
a { color: inherit; text-decoration: none; transition: color .15s; }
::selection { background: rgba(99,102,241,.25); color: inherit; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; }
:focus:not(:focus-visible) { outline: none; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-6) 0; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--space-6); }
.small  { font-size: var(--fs-1); color: var(--muted); }
.muted  { color: var(--muted); }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }