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

@layer base {
  :root {
    /* Typography */
    --font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
      "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Code", "Source Code Pro",
      Menlo, Consolas, "DejaVu Sans Mono", monospace;

    /* Control heights & sizing — Buzzbee 32px control grid */
    --control-height: 32px;
    --control-height-sm: 24px;
    --control-height-lg: 40px;
    --size: 16px;
    --size-sm: 12px;
    --size-md: 20px;
    --size-lg: 24px;
    --size-xl: 32px;
    --size-xxl: 48px;

    /* Motion */
    --duration-fast: 0.1s;
    --duration-normal: 0.2s;
    --duration-slow: 0.3s;
    --ease-default: cubic-bezier(0.645, 0.045, 0.355, 1);

    /* Light mode — Buzzbee palette (#1677ff accent, #01bec6 teal) */
    --background: 0 0% 100%;
    --foreground: 0 0% 6.7%;
    --card: 220 14% 97%;
    --card-foreground: 0 0% 6.7%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 6.7%;
    --primary: 216 100% 54%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 14% 97%;
    --secondary-foreground: 0 0% 18%;
    --muted: 220 14% 97%;
    --muted-foreground: 220 9% 45%;
    --accent: 214 100% 95%;
    --accent-foreground: 224 100% 27%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 24% 87%;
    --input: 214 24% 87%;
    --ring: 213 100% 77%;
    --radius: 0.5rem;

    /* Interactive accent — Buzzbee primary #1677ff */
    --accent-hsl: 216 100% 54%;
    --brand-teal: 184 99% 39%;
    --brand-primary-bg: 214 100% 95%;
    --brand-primary-border: 213 100% 77%;
    --brand-focus-ring: 0 0 0 3px #e6f4ff;

    /* Shell surfaces */
    --sidebar-bg: 0 0% 100%;
    --sidebar-border: 214 32% 88%;
    --topbar-bg: 0 0% 100%;
  }

  /* Density modes */
  .density-compact {
    --control-height: 28px;
    --control-height-sm: 21px;
    --control-height-lg: 35px;
    --size: 12px;
    --size-sm: 8px;
    --size-md: 16px;
    --size-lg: 16px;
    --size-xl: 24px;
    --size-xxl: 32px;
  }

  .density-spacious {
    --density-scale: 1.15;
  }

  /* Dark mode — Buzzbee dark palette */
  .dark {
    --background: 0 0% 8%;
    --foreground: 0 0% 86%;
    --card: 0 0% 11%;
    --card-foreground: 0 0% 86%;
    --popover: 0 0% 15%;
    --popover-foreground: 0 0% 86%;
    --primary: 212 70% 55%;
    --primary-foreground: 0 0% 100%;
    --secondary: 0 0% 19%;
    --secondary-foreground: 0 0% 86%;
    --muted: 0 0% 19%;
    --muted-foreground: 0 0% 49%;
    --accent: 216 47% 13%;
    --accent-foreground: 205 80% 85%;
    --destructive: 0 60% 63%;
    --destructive-foreground: 0 0% 100%;
    --border: 0 0% 24%;
    --input: 0 0% 24%;
    --ring: 212 60% 50%;
    --accent-hsl: 212 70% 55%;

    /* Shell surfaces — slightly elevated from background */
    --sidebar-bg: 0 0% 11%;
    --sidebar-border: 0 0% 24%;
    --topbar-bg: 0 0% 8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
}

/* Reduced motion */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.001s !important;
  transition-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
}