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

@layer base {
  :root {
    /* Background */
    --background: #f8fafc; /* slate-50 */
    --background-subtle: #f1f5f9; /* slate-100 */
    --surface: #ffffff; /* white */
    --surface-raised: #ffffff;

    /* Text */
    --foreground: #0f172a; /* slate-900 */
    --foreground-secondary: #334155; /* slate-700 */
    --foreground-muted: #64748b; /* slate-500 */
    --foreground-disabled: #94a3b8; /* slate-400 */

    /* Borders */
    --border: #e2e8f0; /* slate-200 */
    --border-subtle: #f1f5f9; /* slate-100 */
    --border-strong: #cbd5e1; /* slate-300 */

    /* Accent (Blue-ish technical) */
    --primary: #2563eb; /* blue-600 */
    --primary-hover: #1d4ed8; /* blue-700 */
    --primary-subtle: #eff6ff; /* blue-50 */

    /* Semantic */
    --success: #16a34a; /* green-600 */
    --warning: #d97706; /* amber-600 */
    --danger: #dc2626; /* red-600 */
    --info: #0284c7; /* sky-600 */

    /* Radius */
    --radius-sm: 6px;
    --radius: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
  }
}

@layer base {
  body {
    @apply bg-[var(--background)] text-[var(--foreground)] antialiased;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }

  /* Typography */
  h1, h2, h3, h4, h5, h6 {
    @apply text-[var(--foreground)] font-semibold tracking-tight;
  }

  /* Monospace for technical identifiers */
  .font-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  }
}

@layer utilities {
    .text-balance {
        text-wrap: balance;
    }
}

/* Keyboard focus is distinct from committed selection. */
.searchable-option.omni-option-active,
.test-item:focus-within {
    background: var(--background-subtle);
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

@media (min-width: 768px) {
  html.sidebar-collapsed #desktop-sidebar { width: 64px; }
  html.sidebar-collapsed #desktop-sidebar .sidebar-brand,
  html.sidebar-collapsed #desktop-sidebar .sidebar-group-heading { display: none; }
  html.sidebar-collapsed #desktop-sidebar .sidebar-label {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
  }
  html.sidebar-collapsed #desktop-sidebar .sidebar-link { justify-content: center; padding-inline: 0; }
  html.sidebar-collapsed #desktop-sidebar .sidebar-link svg { flex-shrink: 0; }
}