index.css

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

/* ZeroStart Design System - Calming Educational Theme */

@layer base {
  :root {
    /* Primary: Soft Indigo */
    --background: 240 20% 99%;
    --foreground: 240 10% 15%;

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

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

    /* Calming Indigo */
    --primary: 245 58% 51%;
    --primary-foreground: 0 0% 100%;

    /* Soft Purple */
    --secondary: 270 60% 96%;
    --secondary-foreground: 270 50% 30%;

    /* Muted Lavender */
    --muted: 240 20% 96%;
    --muted-foreground: 240 10% 45%;

    /* Accent Teal */
    --accent: 175 60% 94%;
    --accent-foreground: 175 60% 25%;

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

    --border: 240 15% 90%;
    --input: 240 15% 90%;
    --ring: 245 58% 51%;

    --radius: 0.75rem;

    /* Success Green */
    --success: 142 70% 45%;
    --success-foreground: 0 0% 100%;

    /* Warning Amber */
    --warning: 38 92% 50%;
    --warning-foreground: 0 0% 100%;

    /* Info Blue */
    --info: 210 100% 50%;
    --info-foreground: 0 0% 100%;

    /* Sidebar */
    --sidebar-background: 240 20% 98%;
    --sidebar-foreground: 240 10% 30%;
    --sidebar-primary: 245 58% 51%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 270 60% 96%;
    --sidebar-accent-foreground: 270 50% 30%;
    --sidebar-border: 240 15% 92%;
    --sidebar-ring: 245 58% 51%;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, hsl(245 58% 51%) 0%, hsl(270 60% 55%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(175 60% 45%) 0%, hsl(200 70% 50%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(245 58% 51% / 0.1) 0%, hsl(270 60% 55% / 0.1) 100%);
  }

  .dark {
    --background: 240 10% 8%;
    --foreground: 240 20% 95%;

    --card: 240 10% 12%;
    --card-foreground: 240 20% 95%;

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

    --primary: 245 58% 65%;
    --primary-foreground: 240 10% 8%;

    --secondary: 270 30% 20%;
    --secondary-foreground: 270 40% 85%;

    --muted: 240 10% 18%;
    --muted-foreground: 240 15% 60%;

    --accent: 175 40% 20%;
    --accent-foreground: 175 50% 80%;

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

    --border: 240 10% 20%;
    --input: 240 10% 20%;
    --ring: 245 58% 65%;

    --success: 142 60% 40%;
    --success-foreground: 0 0% 100%;

    --warning: 38 80% 45%;
    --warning-foreground: 0 0% 100%;

    --info: 210 90% 55%;
    --info-foreground: 0 0% 100%;

    --sidebar-background: 240 10% 10%;
    --sidebar-foreground: 240 15% 80%;
    --sidebar-primary: 245 58% 65%;
    --sidebar-primary-foreground: 240 10% 8%;
    --sidebar-accent: 270 30% 20%;
    --sidebar-accent-foreground: 270 40% 85%;
    --sidebar-border: 240 10% 18%;
    --sidebar-ring: 245 58% 65%;

    --gradient-primary: linear-gradient(135deg, hsl(245 58% 65%) 0%, hsl(270 50% 60%) 100%);
    --gradient-secondary: linear-gradient(135deg, hsl(175 50% 40%) 0%, hsl(200 60% 45%) 100%);
    --gradient-hero: linear-gradient(135deg, hsl(245 58% 65% / 0.15) 0%, hsl(270 50% 60% / 0.15) 100%);
  }
}

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

  body {
    @apply bg-background text-foreground antialiased;
    font-family: 'Inter', system-ui, sans-serif;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  }
}

@layer utilities {
  .gradient-primary {
    background: var(--gradient-primary);
  }

  .gradient-secondary {
    background: var(--gradient-secondary);
  }

  .gradient-hero {
    background: var(--gradient-hero);
  }

  .animate-float {
    animation: float 6s ease-in-out infinite;
  }

  .animate-pulse-slow {
    animation: pulse 3s ease-in-out infinite;
  }

  .animate-fade-up {
    animation: fadeUp 0.5s ease-out forwards;
  }

  .glass-effect {
    @apply bg-card/80 backdrop-blur-md border border-border/50;
  }

  .text-gradient {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-muted/50 rounded-full;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/30 rounded-full hover:bg-muted-foreground/50 transition-colors;
}

/* Focus styles */
:focus-visible {
  @apply outline-none ring-2 ring-ring ring-offset-2 ring-offset-background;
}