/* ========== Color & Theme Variables ========== */
:root {
  /* Defaults (can be overridden from index.html <script> setProperty) */
  --primary-500: #6366F1;
  --secondary-500: #F59E0B;

  /* Light theme tokens */
  --background: 0 0% 100%;
  --foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 47.4% 11.2%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 47.4% 11.2%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

/* Dark theme tokens */
:root[data-theme="dark"] {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --ring: 212.7 26.8% 83.9%;
}

/* ========== Base / Tailwind-like Utilities ========== */
@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  .container {
    @apply max-w-6xl;
  }
  .text-primary-500 {
    color: var(--primary-500);
  }
  .bg-primary-500 {
    background-color: var(--primary-500);
  }
  .border-primary-500 {
    border-color: var(--primary-500);
  }
  .text-secondary-500 {
    color: var(--secondary-500);
  }
  .bg-secondary-500 {
    background-color: var(--secondary-500);
  }
  .border-secondary-500 {
    border-color: var(--secondary-500);
  }
}

/* Map design tokens to Tailwind-like classes */
@layer base {
  :root {
    --background: hsl(var(--background));
    --foreground: hsl(var(--foreground));
    --muted: hsl(var(--muted));
    --muted-foreground: hsl(var(--muted-foreground));
    --popover: hsl(var(--popover));
    --popover-foreground: hsl(var(--popover-foreground));
    --card: hsl(var(--card));
    --card-foreground: hsl(var(--card-foreground));
    --border: hsl(var(--border));
    --input: hsl(var(--input));
    --accent: hsl(var(--accent));
    --accent-foreground: hsl(var(--accent-foreground));
    --destructive: hsl(var(--destructive));
    --destructive-foreground: hsl(var(--destructive-foreground));
    --ring: hsl(var(--ring));
    --radius: var(--radius);
  }
}

.bg-background { background-color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.bg-muted { background-color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.bg-accent { background-color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }

/* Focus ring */
.focus\:ring-2:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px hsl(var(--ring));
}