/* ─── Design Tokens ─────────────────────────────────────── */
:root {
  --c-primary:   #6366f1;
  --c-primary-h: #4f46e5;
  --c-accent:    #0ea5a4;
  --c-danger:    #ef4444;
  --c-success:   #22c55e;
  --c-warn:      #f59e0b;
  --c-bg:        #f1f5f9;
  --c-surface:   #ffffff;
  --c-border:    #e2e8f0;
  --c-text:      #1e293b;
  --c-muted:     #64748b;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,.10);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.14);

  --transition: 150ms ease;
  --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

/* ─── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
button { cursor: pointer; font-family: inherit; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font-family: inherit; font-size: 1rem; }

/* ─── Utility ───────────────────────────────────────────── */
.hidden   { display: none !important; }
.sr-only  { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.muted    { color: var(--c-muted); font-size: .85rem; }
.center   { text-align: center; }
.flex     { display: flex; }
.gap-1    { gap: 4px; }
.gap-2    { gap: 8px; }
.gap-3    { gap: 12px; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }