/* CSS Variables for Theme Colors */
:root {
    --background: hsl(220, 13%, 97%);
    --foreground: hsl(210, 11%, 15%);
    --card: hsl(0, 0%, 100%);
    --card-foreground: hsl(210, 11%, 15%);
    --primary: hsl(214, 100%, 47%);
    --primary-foreground: hsl(0, 0%, 100%);
    --secondary: hsl(220, 13%, 91%);
    --secondary-foreground: hsl(210, 11%, 15%);
    --muted: hsl(220, 13%, 91%);
    --muted-foreground: hsl(215, 16%, 47%);
    --accent: hsl(142, 76%, 36%);
    --accent-foreground: hsl(0, 0%, 100%);
    --destructive: hsl(0, 84%, 60%);
    --destructive-foreground: hsl(0, 0%, 100%);
    --border: hsl(220, 13%, 87%);
    --ring: hsl(214, 100%, 47%);
    --radius: 0.75rem;
    --warning: hsl(45, 93%, 47%);
}

/* Dark mode
@media (prefers-color-scheme: dark) {
  :root {
    --background: hsl(224, 71%, 4%);
    --foreground: hsl(213, 31%, 91%);
    --card: hsl(224, 71%, 4%);
    --card-foreground: hsl(213, 31%, 91%);
    --primary: hsl(214, 100%, 47%);
    --primary-foreground: hsl(0, 0%, 100%);
    --secondary: hsl(215, 28%, 17%);
    --secondary-foreground: hsl(213, 31%, 91%);
    --muted: hsl(215, 28%, 17%);
    --muted-foreground: hsl(218, 11%, 65%);
    --accent: hsl(142, 76%, 36%);
    --accent-foreground: hsl(0, 0%, 100%);
    --destructive: hsl(0, 63%, 31%);
    --destructive-foreground: hsl(0, 0%, 100%);
    --border: hsl(215, 28%, 17%);
    --ring: hsl(214, 100%, 47%);
  }
} */

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--background);
    color: var(--foreground);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}