/* shadcn/ui inspired theme for Basecoat UI */
:root {
  /* Base colors */
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;

  /* Custom spacing and sizing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
  }
}

/* Apply theme variables to Basecoat components */
.btn {
  --btn-bg: hsl(var(--primary));
  --btn-color: hsl(var(--primary-foreground));
  --btn-border: hsl(var(--border));
  border-radius: var(--radius);
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.btn:hover {
  --btn-bg: hsl(var(--primary) / 0.9);
}

.btn-secondary {
  --btn-bg: hsl(var(--secondary));
  --btn-color: hsl(var(--secondary-foreground));
}

.btn-outline {
  --btn-bg: transparent;
  --btn-color: hsl(var(--foreground));
  --btn-border: hsl(var(--border));
  border: 1px solid var(--btn-border);
}

.btn-outline:hover {
  --btn-bg: hsl(var(--accent));
  --btn-color: hsl(var(--accent-foreground));
}

/* Form elements */
input, textarea, select {
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  padding: var(--spacing-sm) var(--spacing-md);
  transition: border-color 0.2s ease-in-out;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: hsl(var(--ring));
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.2);
}

/* Card components */
.card {
  background-color: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  padding: var(--spacing-lg);
  box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
}

/* Navigation styling */
nav ul {
  display: flex;
  gap: var(--spacing-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a {
  color: hsl(var(--foreground));
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--radius);
  transition: background-color 0.2s ease-in-out;
}

nav a:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

nav a.active {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

/* Error styling */
.error {
  background-color: hsl(var(--destructive) / 0.1);
  border: 1px solid hsl(var(--destructive));
  color: hsl(var(--destructive));
  padding: var(--spacing-md);
  border-radius: var(--radius);
  font-weight: 500;
}

/* Container improvements */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
}

/* Header styling */
header {
  border-bottom: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  padding: var(--spacing-md) 0;
}

header div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Footer styling */
footer {
  border-top: 1px solid hsl(var(--border));
  background-color: hsl(var(--muted));
  padding: var(--spacing-lg) 0;
  margin-top: auto;
}

/* Main content */
main {
  min-height: calc(100vh - 200px);
  padding: var(--spacing-lg) 0;
}