ProjectE/apps/web/src/index.css

@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 */
    --control-height: 40px;
    --control-height-sm: 32px;
    --control-height-lg: 48px;
    --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 */
    --background: 0 0% 100%;
    --foreground: 0 0% 6.7%;
    --card: 220 13% 97%;
    --card-foreground: 0 0% 6.7%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 6.7%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 0 0% 18%;
    --muted: 210 40% 96%;
    --muted-foreground: 220 9% 45%;
    --accent: 210 100% 95%;
    --accent-foreground: 222 100% 27%;
    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;
    --border: 214 32% 88%;
    --input: 214 32% 88%;
    --ring: 210 100% 75%;
    --radius: 0.5rem;

    /* Interactive accent — pinned vibrant blue */
    --accent-hsl: 217 91% 60%;

    /* 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;
}