@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: hsl(210, 40%, 98%);
  --foreground: hsl(222.2, 84%, 4.9%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222.2, 84%, 4.9%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222.2, 84%, 4.9%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(210, 40%, 98%);
  --secondary: hsl(142, 76%, 36%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(210, 40%, 96%);
  --muted-foreground: hsl(215.4, 16.3%, 46.9%);
  --accent: hsl(43, 96%, 56%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(214.3, 31.8%, 91.4%);
  --input: hsl(214.3, 31.8%, 91.4%);
  --ring: hsl(217, 91%, 60%);
  --chart-1: hsl(217, 91%, 60%);
  --chart-2: hsl(142, 76%, 36%);
  --chart-3: hsl(43, 96%, 56%);
  --chart-4: hsl(147.1429, 78.5047%, 41.9608%);
  --chart-5: hsl(341.4894, 75.2000%, 50.9804%);
  --sidebar: hsl(180, 6.6667%, 97.0588%);
  --sidebar-foreground: hsl(210, 25%, 7.8431%);
  --sidebar-primary: hsl(217, 91%, 60%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
  --sidebar-accent: hsl(211.5789, 51.3514%, 92.7451%);
  --sidebar-accent-foreground: hsl(217, 91%, 60%);
  --sidebar-border: hsl(205.0000, 25.0000%, 90.5882%);
  --sidebar-ring: hsl(217, 91%, 60%);
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 1px 2px -1px hsl(217, 91%, 60% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 1px 2px -1px hsl(217, 91%, 60% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 2px 4px -1px hsl(217, 91%, 60% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 4px 6px -1px hsl(217, 91%, 60% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 8px 10px -1px hsl(217, 91%, 60% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  --background: hsl(0, 0%, 0%);
  --foreground: hsl(200, 6.6667%, 91.1765%);
  --card: hsl(228, 9.8039%, 10%);
  --card-foreground: hsl(0, 0%, 85.0980%);
  --popover: hsl(0, 0%, 0%);
  --popover-foreground: hsl(200, 6.6667%, 91.1765%);
  --primary: hsl(217, 91%, 60%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(142, 76%, 36%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(0, 0%, 9.4118%);
  --muted-foreground: hsl(210, 3.3898%, 46.2745%);
  --accent: hsl(43, 96%, 56%);
  --accent-foreground: hsl(210, 40%, 98%);
  --destructive: hsl(0, 84.2%, 60.2%);
  --destructive-foreground: hsl(0, 0%, 100%);
  --border: hsl(210, 5.2632%, 14.9020%);
  --input: hsl(207.6923, 27.6596%, 18.4314%);
  --ring: hsl(217, 91%, 60%);
  --chart-1: hsl(217, 91%, 60%);
  --chart-2: hsl(142, 76%, 36%);
  --chart-3: hsl(43, 96%, 56%);
  --chart-4: hsl(147.1429, 78.5047%, 41.9608%);
  --chart-5: hsl(341.4894, 75.2000%, 50.9804%);
  --sidebar: hsl(228, 9.8039%, 10%);
  --sidebar-foreground: hsl(0, 0%, 85.0980%);
  --sidebar-primary: hsl(217, 91%, 60%);
  --sidebar-primary-foreground: hsl(0, 0%, 100%);
  --sidebar-accent: hsl(205.7143, 70%, 7.8431%);
  --sidebar-accent-foreground: hsl(217, 91%, 60%);
  --sidebar-border: hsl(205.7143, 15.7895%, 26.0784%);
  --sidebar-ring: hsl(217, 91%, 60%);
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 1px 2px -1px hsl(217, 91%, 60% / 0.00);
  --shadow: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 1px 2px -1px hsl(217, 91%, 60% / 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 2px 4px -1px hsl(217, 91%, 60% / 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 4px 6px -1px hsl(217, 91%, 60% / 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00), 0px 8px 10px -1px hsl(217, 91%, 60% / 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(217, 91%, 60% / 0.00);
}

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

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-family: var(--font-sans);
  }
}

@layer components {
  .timer-circle {
    background: conic-gradient(from 0deg, hsl(var(--primary)) 75%, hsl(var(--muted)) 75%);
  }
  
  .progress-bar {
    background: linear-gradient(90deg, hsl(var(--secondary)) 60%, hsl(var(--muted)) 60%);
  }
  
  .lesson-card:hover {
    transform: translateY(-2px);
    transition: all 0.2s ease-in-out;
  }
  
  .achievement-badge {
    background: linear-gradient(135deg, hsl(var(--accent)), hsl(var(--secondary)));
  }
}