@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    color-scheme: light;
  }
  html.dark {
    color-scheme: dark;
  }
  * {
    @apply border-ink-700/10 dark:border-ink-600/40;
  }
  html, body {
    @apply h-full;
  }
  body {
    @apply bg-ivory-50 text-ink-900 dark:bg-ink-950 dark:text-ivory-100 font-sans antialiased;
    font-feature-settings: 'ss01' 1, 'cv01' 1;
  }
  ::selection {
    @apply bg-brass-400/40;
  }
  :focus-visible {
    outline: 2px solid theme('colors.brass.500');
    outline-offset: 2px;
    border-radius: 4px;
  }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb {
    @apply bg-ink-700/20 dark:bg-ivory-100/10 rounded-full;
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer components {
  .surface {
    @apply bg-white dark:bg-ink-900 border border-ink-900/[0.06] dark:border-ivory-100/[0.06] rounded-xl shadow-card dark:shadow-card-dark;
  }
  .nav-link {
    @apply flex items-center gap-3 rounded-lg px-3 py-2 text-sm text-ink-700 dark:text-ivory-200/80
      hover:bg-ink-900/[0.04] hover:text-ink-950 dark:hover:bg-ivory-100/[0.06] dark:hover:text-ivory-50
      transition-colors duration-150;
  }
  .nav-link.active {
    @apply bg-brass-500/[0.12] text-brass-700 dark:text-brass-300 font-medium;
  }
  .badge {
    @apply inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-mono font-medium tracking-tight;
  }
  .badge-live {
    @apply bg-moss-500/15 text-moss-500 dark:text-moss-400;
  }
  .badge-planned {
    @apply bg-ink-900/[0.06] text-ink-700 dark:bg-ivory-100/[0.08] dark:text-ivory-300;
  }
  .kbd {
    @apply font-mono text-[11px] px-1.5 py-0.5 rounded-md border border-ink-900/10 dark:border-ivory-100/15
      bg-ivory-100 dark:bg-ink-800 text-ink-700 dark:text-ivory-200;
  }
  .btn-ghost {
    @apply inline-flex items-center gap-2 rounded-lg px-3 py-1.5 text-sm text-ink-700 dark:text-ivory-200
      hover:bg-ink-900/[0.05] dark:hover:bg-ivory-100/[0.08] transition-colors duration-150;
  }
  .sidebar-collapsed .sidebar-label {
    @apply hidden;
  }
  .sidebar-collapsed .nav-link {
    @apply justify-center px-0;
  }
  .btn-primary {
    @apply inline-flex items-center gap-2 rounded-lg px-3.5 py-1.5 text-sm font-medium
      bg-ink-950 text-ivory-50 hover:bg-ink-800 dark:bg-brass-500 dark:text-ink-950 dark:hover:bg-brass-400
      transition-colors duration-150;
  }
}