@layer base {
  :root {
    /* Modern violet/indigo theme with good contrast */
    --background: 230 15% 93%;
    --foreground: 240 10% 6%;

    --card: 0 0% 100%;
    --card-foreground: 240 10% 6%;

    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 6%;

    /* Indigo-blue primary matching header */
    --primary: 230 76% 50%;
    --primary-foreground: 0 0% 100%;

    --secondary: 230 10% 96%;
    --secondary-foreground: 240 10% 6%;

    --muted: 230 10% 94%;
    --muted-foreground: 230 10% 42%;

    --accent: 230 76% 96%;
    --accent-foreground: 230 76% 45%;

    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;

    --border: 230 15% 86%;
    --input: 230 15% 88%;
    --ring: 230 76% 50%;

    --radius: 0.625rem;
  }

  .dark {
    --background: 240 10% 6%;
    --foreground: 0 0% 95%;

    --card: 240 10% 10%;
    --card-foreground: 0 0% 95%;

    --popover: 240 10% 10%;
    --popover-foreground: 0 0% 95%;

    --primary: 262 83% 65%;
    --primary-foreground: 0 0% 100%;

    --secondary: 240 4% 16%;
    --secondary-foreground: 0 0% 95%;

    --muted: 240 4% 16%;
    --muted-foreground: 240 5% 65%;

    --accent: 262 50% 20%;
    --accent-foreground: 262 83% 75%;

    --destructive: 0 62.8% 45%;
    --destructive-foreground: 0 0% 100%;

    --border: 240 4% 16%;
    --input: 240 4% 16%;
    --ring: 262 83% 65%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}