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

@layer base {
  :root {
    --background: 210 16.6667% 97.6471%;
    --foreground: 240 41.4634% 8.0392%;
    --card: 0 0% 100%;
    --card-foreground: 240 41.4634% 8.0392%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 41.4634% 8.0392%;
    --primary: 312.9412 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 100% 97.0588%;
    --secondary-foreground: 240 41.4634% 8.0392%;
    --muted: 240 100% 97.0588%;
    --muted-foreground: 240 41.4634% 8.0392%;
    --accent: 168 100% 50%;
    --accent-foreground: 240 41.4634% 8.0392%;
    --destructive: 14.3529 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 198 18.5185% 89.4118%;
    --input: 198 18.5185% 89.4118%;
    --ring: 312.9412 100% 50%;
    --chart-1: 312.9412 100% 50%;
    --chart-2: 273.8824 100% 50%;
    --chart-3: 186.1176 100% 50%;
    --chart-4: 168 100% 50%;
    --chart-5: 54.1176 100% 50%;
    --sidebar: 240 100% 97.0588%;
    --sidebar-foreground: 240 41.4634% 8.0392%;
    --sidebar-primary: 312.9412 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 168 100% 50%;
    --sidebar-accent-foreground: 240 41.4634% 8.0392%;
    --sidebar-border: 198 18.5185% 89.4118%;
    --sidebar-ring: 312.9412 100% 50%;
    --font-sans: Outfit, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: Fira Code, monospace;
    --radius: 0.5rem;
    --shadow-2xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 1px 2px -3px hsl(0 0% 0% / 0.1);
    --shadow: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 1px 2px -3px hsl(0 0% 0% / 0.1);
    --shadow-md: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 2px 4px -3px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 4px 6px -3px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 8px 10px -3px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.25);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
  }

  .dark {
    --background: 240 41.4634% 8.0392%;
    --foreground: 217.5 26.6667% 94.1176%;
    --card: 240 35.4839% 18.2353%;
    --card-foreground: 217.5 26.6667% 94.1176%;
    --popover: 240 35.4839% 18.2353%;
    --popover-foreground: 217.5 26.6667% 94.1176%;
    --primary: 312.9412 100% 50%;
    --primary-foreground: 0 0% 100%;
    --secondary: 240 35.4839% 18.2353%;
    --secondary-foreground: 217.5 26.6667% 94.1176%;
    --muted: 240 35.4839% 18.2353%;
    --muted-foreground: 232.1053 17.5926% 57.6471%;
    --accent: 168 100% 50%;
    --accent-foreground: 240 41.4634% 8.0392%;
    --destructive: 14.3529 100% 50%;
    --destructive-foreground: 0 0% 100%;
    --border: 240 34.2857% 27.451%;
    --input: 240 34.2857% 27.451%;
    --ring: 312.9412 100% 50%;
    --chart-1: 312.9412 100% 50%;
    --chart-2: 273.8824 100% 50%;
    --chart-3: 186.1176 100% 50%;
    --chart-4: 168 100% 50%;
    --chart-5: 54.1176 100% 50%;
    --sidebar: 240 41.4634% 8.0392%;
    --sidebar-foreground: 217.5 26.6667% 94.1176%;
    --sidebar-primary: 312.9412 100% 50%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 168 100% 50%;
    --sidebar-accent-foreground: 240 41.4634% 8.0392%;
    --sidebar-border: 240 34.2857% 27.451%;
    --sidebar-ring: 312.9412 100% 50%;
    --font-sans: Outfit, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: Fira Code, monospace;
    --radius: 0.5rem;
    --shadow-2xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05);
    --shadow-xs: 0px 4px 8px -2px hsl(0 0% 0% / 0.05);
    --shadow-sm: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 1px 2px -3px hsl(0 0% 0% / 0.1);
    --shadow: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 1px 2px -3px hsl(0 0% 0% / 0.1);
    --shadow-md: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 2px 4px -3px hsl(0 0% 0% / 0.1);
    --shadow-lg: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 4px 6px -3px hsl(0 0% 0% / 0.1);
    --shadow-xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.1),
      0px 8px 10px -3px hsl(0 0% 0% / 0.1);
    --shadow-2xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.25);
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}