/* =========================================
   GLOBAL CSS — Reset, Variables, Typography
   ========================================= */

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

:root {
  /* Brand */
  --primary: #4F46E5;
  --primary-dark: #4338CA;
  --primary-light: #EEF2FF;
  --primary-mid: rgba(79, 70, 229, 0.12);

  /* Sidebar */
  --sidebar-bg: #0F172A;
  --sidebar-hover: rgba(255, 255, 255, 0.06);
  --sidebar-active-bg: rgba(79, 70, 229, 0.18);
  --sidebar-text: #94A3B8;

  /* Neutrals */
  --bg: #F1F5F9;
  --white: #FFFFFF;
  --text: #1E293B;
  --text-muted: #64748B;
  --text-light: #94A3B8;
  --border: #E2E8F0;
  --border-focus: #4F46E5;

  /* Semantic */
  --success: #059669;
  --success-bg: #ECFDF5;
  --warning: #D97706;
  --warning-bg: #FFFBEB;
  --danger: #DC2626;
  --danger-bg: #FEF2F2;
  --info: #2563EB;
  --info-bg: #EFF6FF;

  /* Elevation */
  --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: 0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 16px rgba(0,0,0,0.08), 0 4px 6px rgba(0,0,0,0.04);
  --shadow-lg: 0 20px 30px rgba(0,0,0,0.10), 0 8px 12px rgba(0,0,0,0.05);
  --shadow-xl: 0 32px 48px rgba(0,0,0,0.16), 0 16px 24px rgba(0,0,0,0.06);

  /* Shape */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 9999px;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 100ms;
  --dur: 160ms;
  --dur-md: 240ms;
  --dur-slow: 350ms;
}

/* ── Base ── */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
}

a {
  color: var(--primary);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
a:hover { color: var(--primary-dark); text-decoration: underline; }

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
button { cursor: pointer; font-family: var(--font); border: none; background: none; }
input, textarea, select { font-family: var(--font); }
h1, h2, h3, h4, h5, h6 { line-height: 1.3; font-weight: 700; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-light); }

/* ── Utility ── */
.hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;
}
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--text-muted); }
.text-light  { color: var(--text-light); }
.ml-auto { margin-left: auto; }
.flex { display: flex; }
.items-center { align-items: center; }
.gap-2 { gap: 0.5rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.w-full { width: 100%; }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }