src/client/index.css

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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 205 100% 15%;

    --card: 0 0% 100%;
    --card-foreground: 205 100% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 205 100% 15%;

    --primary: 205 100% 26%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 13% 95%;
    --secondary-foreground: 205 100% 15%;

    --muted: 220 13% 95%;
    --muted-foreground: 205 60% 40%;

    --accent: 12 85% 50%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 205 100% 26%;

    --radius: 0.5rem;

    --sidebar-background: 0 0% 100%;
    --sidebar-foreground: 205 60% 40%;
    --sidebar-primary: 205 100% 26%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 220 13% 95%;
    --sidebar-accent-foreground: 205 100% 15%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 205 100% 26%;
  }

  .dark {
    /* Premium dark theme - AI startup aesthetic, high readability */
    --background: 224 71% 4%;
    --foreground: 213 31% 91%;

    --card: 224 71% 6%;
    --card-foreground: 213 31% 91%;

    --popover: 224 71% 6%;
    --popover-foreground: 213 31% 91%;

    --primary: 192 91% 52%;
    --primary-foreground: 224 71% 4%;

    --secondary: 223 47% 11%;
    --secondary-foreground: 213 31% 91%;

    --muted: 223 47% 11%;
    --muted-foreground: 215 20% 65%;

    --accent: 192 91% 52%;
    --accent-foreground: 224 71% 4%;

    --destructive: 0 63% 55%;
    --destructive-foreground: 0 0% 100%;

    --border: 223 47% 14%;
    --input: 223 47% 14%;
    --ring: 192 91% 52%;

    /* Premium sidebar - deeper, sleeker */
    --sidebar-background: 224 71% 3%;
    --sidebar-foreground: 215 20% 75%;
    --sidebar-primary: 192 91% 52%;
    --sidebar-primary-foreground: 224 71% 4%;
    --sidebar-accent: 223 47% 9%;
    --sidebar-accent-foreground: 213 31% 91%;
    --sidebar-border: 223 47% 10%;
    --sidebar-ring: 192 91% 52%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground antialiased;
  }

  /* Enhanced dark mode styling */
  .dark {
    color-scheme: dark;
  }

  /* Better card shadows in dark mode */
  .dark .shadow-sm {
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.3), 0 1px 3px 0 rgb(0 0 0 / 0.2);
  }

  /* Improved focus states for accessibility */
  .dark *:focus-visible {
    outline: 2px solid hsl(192 91% 52%);
    outline-offset: 2px;
  }

  /* Smoother text rendering in dark mode */
  .dark body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Better scrollbar in dark mode */
  .dark ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  .dark ::-webkit-scrollbar-track {
    background: hsl(224 71% 4%);
  }

  .dark ::-webkit-scrollbar-thumb {
    background: hsl(223 47% 20%);
    border-radius: 4px;
  }

  .dark ::-webkit-scrollbar-thumb:hover {
    background: hsl(223 47% 28%);
  }
}