@tailwind base;
@tailwind components;
@tailwind utilities;
:root {
  --color-primary: #3B82F6;
  --color-primary-light: #EBF5FF;
  --color-primary-dark: #2563EB;
  --color-surface: #FFFFFF;
  --color-surface-muted: #F8F9FA;
  --color-border: #E5E7EB;
  --color-ink: #1F2937;
  --color-ink-muted: #6B7280;
  --color-ink-subtle: #9CA3AF;
  --color-success: #10B981;
  --color-danger: #EF4444;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]),
  :root[data-theme=system] {
    --color-primary: #60A5FA;
    --color-primary-light: #172554;
    --color-primary-dark: #93C5FD;
    --color-surface: #101827;
    --color-surface-muted: #0B1120;
    --color-border: #263244;
    --color-ink: #F9FAFB;
    --color-ink-muted: #9CA3AF;
    --color-ink-subtle: #6B7280;
  }
}
:root.dark,
:root[data-theme=dark] {
  --color-primary: #60A5FA;
  --color-primary-light: #172554;
  --color-primary-dark: #93C5FD;
  --color-surface: #101827;
  --color-surface-muted: #0B1120;
  --color-border: #263244;
  --color-ink: #F9FAFB;
  --color-ink-muted: #9CA3AF;
  --color-ink-subtle: #6B7280;
  color-scheme: dark;
}

:root[data-theme=light] {
  color-scheme: light;
}

@layer base {
  html, body, #admin-root {
    height: 100%;
    margin: 0;
  }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background: var(--color-surface-muted);
    color: var(--color-ink);
    -webkit-font-smoothing: antialiased;
  }
}
.density-compact #admin-root .h-14 {
  height: 3rem;
}

.density-compact #admin-root .p-6 {
  padding: 1rem;
}

.density-compact #admin-root .p-4 {
  padding: 0.75rem;
}

.density-compact #admin-root .p-3 {
  padding: 0.625rem;
}

.density-compact #admin-root .px-6 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.density-compact #admin-root .px-4 {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.density-compact #admin-root .px-3 {
  padding-left: 0.625rem;
  padding-right: 0.625rem;
}

.density-compact #admin-root .py-4 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.density-compact #admin-root .py-3 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.density-compact #admin-root .py-2\.5 {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.density-compact #admin-root .py-2 {
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
}

.density-compact #admin-root .gap-4 {
  gap: 0.75rem;
}

.density-compact #admin-root .gap-3 {
  gap: 0.625rem;
}

.density-compact #admin-root .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.75rem;
}

.density-compact #admin-root .space-y-3 > :not([hidden]) ~ :not([hidden]) {
  margin-top: 0.5rem;
}

.density-compact #admin-root .mb-6 {
  margin-bottom: 1rem;
}

.density-compact #admin-root .mb-4 {
  margin-bottom: 0.75rem;
}

.density-compact #admin-root .text-lg {
  font-size: 1rem;
  line-height: 1.5rem;
}

@layer utilities {
  .scrollbar-thin {
    scrollbar-width: thin;
  }
  .scrollbar-thin::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }
  .scrollbar-thin::-webkit-scrollbar-thumb {
    background: var(--color-border);
    border-radius: 3px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}