@import "tailwindcss";

@theme {
  --font-sans: "IBM Plex Sans", "Avenir Next", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));
  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));
  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));
  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));
  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
}

@layer base {
  :root {
    --background: 220 33% 97%;
    --foreground: 222 47% 11%;
    --card: 0 0% 100%;
    --card-foreground: 222 47% 11%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 50% 93%;
    --secondary-foreground: 222 47% 11%;
    --muted: 220 26% 93%;
    --muted-foreground: 220 13% 46%;
    --accent: 217 91% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 20% 88%;
    --input: 220 20% 88%;
    --ring: 217 91% 60%;
    --radius: 1rem;
    --chart-grid: 220 20% 88%;
    --chart-label: 220 13% 46%;
    --chart-primary: 217 91% 60%;
    --chart-primary-light: 217 91% 65%;
    --chart-primary-dark: 217 70% 50%;
    --chart-primary-accent: 217 91% 45%;
    --chart-secondary: 206 22% 75%;
  }

  .dark {
    --background: 222 47% 8%;
    --foreground: 220 20% 90%;
    --card: 222 40% 12%;
    --card-foreground: 220 20% 90%;
    --primary: 217 91% 60%;
    --primary-foreground: 0 0% 100%;
    --secondary: 220 30% 18%;
    --secondary-foreground: 220 20% 90%;
    --muted: 220 20% 16%;
    --muted-foreground: 220 13% 55%;
    --accent: 217 91% 60%;
    --accent-foreground: 0 0% 100%;
    --destructive: 0 72% 51%;
    --destructive-foreground: 0 0% 100%;
    --border: 220 20% 20%;
    --input: 220 20% 20%;
    --ring: 217 91% 60%;
    --chart-grid: 220 20% 22%;
    --chart-label: 220 13% 50%;
    --chart-primary: 217 91% 65%;
    --chart-primary-light: 217 91% 70%;
    --chart-primary-dark: 217 70% 55%;
    --chart-primary-accent: 217 91% 55%;
    --chart-secondary: 220 20% 35%;
  }

  * {
    border-color: hsl(var(--border));
  }

  html {
    font-family: var(--font-sans);
    color-scheme: light dark;
  }

  body {
    min-height: 100vh;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}