/* djust_theming - Auto-generated CSS */

:root {
  --background: 0 0% 100%;
  --foreground: 20 50% 10%;
  --card: 0 0% 100%;
  --card-foreground: 20 50% 10%;
  --popover: 0 0% 100%;
  --popover-foreground: 20 50% 10%;
  --primary: 24 95% 53%;
  --primary-foreground: 24 100% 98%;
  --secondary: 24 30% 95%;
  --secondary-foreground: 20 50% 10%;
  --muted: 24 30% 95%;
  --muted-foreground: 20 15% 45%;
  --accent: 24 30% 95%;
  --accent-foreground: 20 50% 10%;
  --destructive: 0 84% 60%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 76% 36%;
  --success-foreground: 0 0% 98%;
  --warning: 38 92% 50%;
  --warning-foreground: 0 0% 98%;
  --border: 24 25% 88%;
  --input: 24 25% 88%;
  --ring: 24 95% 53%;
  --sidebar-background: 0 0% 100%;
  --sidebar-foreground: 20 50% 10%;
  --sidebar-primary: 24 95% 53%;
  --sidebar-primary-foreground: 24 100% 98%;
  --sidebar-accent: 24 30% 95%;
  --sidebar-accent-foreground: 20 50% 10%;
  --sidebar-border: 24 25% 88%;
  --sidebar-ring: 24 95% 53%;
  --chart-1: 24 95% 53%;
  --chart-2: 24 30% 95%;
  --chart-3: 24 30% 95%;
  --chart-4: 142 76% 36%;
  --chart-5: 38 92% 50%;
  --radius: 0.5rem;
}

.dark,
[data-theme="dark"] {
  --background: 20 50% 8%;
  --foreground: 24 100% 98%;
  --card: 20 50% 8%;
  --card-foreground: 24 100% 98%;
  --popover: 20 50% 8%;
  --popover-foreground: 24 100% 98%;
  --primary: 24 95% 55%;
  --primary-foreground: 20 50% 8%;
  --secondary: 20 30% 16%;
  --secondary-foreground: 24 100% 98%;
  --muted: 20 30% 16%;
  --muted-foreground: 20 20% 60%;
  --accent: 20 30% 16%;
  --accent-foreground: 24 100% 98%;
  --destructive: 0 62% 30%;
  --destructive-foreground: 0 0% 98%;
  --success: 142 69% 28%;
  --success-foreground: 0 0% 98%;
  --warning: 38 92% 40%;
  --warning-foreground: 0 0% 98%;
  --border: 20 30% 16%;
  --input: 20 30% 16%;
  --ring: 24 95% 55%;
  --sidebar-background: 20 50% 8%;
  --sidebar-foreground: 24 100% 98%;
  --sidebar-primary: 24 95% 55%;
  --sidebar-primary-foreground: 20 50% 8%;
  --sidebar-accent: 20 30% 16%;
  --sidebar-accent-foreground: 24 100% 98%;
  --sidebar-border: 20 30% 16%;
  --sidebar-ring: 24 95% 55%;
  --chart-1: 24 95% 55%;
  --chart-2: 20 30% 16%;
  --chart-3: 20 30% 16%;
  --chart-4: 142 69% 28%;
  --chart-5: 38 92% 40%;
  --radius: 0.5rem;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --background: 20 50% 8%;
    --foreground: 24 100% 98%;
    --card: 20 50% 8%;
    --card-foreground: 24 100% 98%;
    --popover: 20 50% 8%;
    --popover-foreground: 24 100% 98%;
    --primary: 24 95% 55%;
    --primary-foreground: 20 50% 8%;
    --secondary: 20 30% 16%;
    --secondary-foreground: 24 100% 98%;
    --muted: 20 30% 16%;
    --muted-foreground: 20 20% 60%;
    --accent: 20 30% 16%;
    --accent-foreground: 24 100% 98%;
    --destructive: 0 62% 30%;
    --destructive-foreground: 0 0% 98%;
    --success: 142 69% 28%;
    --success-foreground: 0 0% 98%;
    --warning: 38 92% 40%;
    --warning-foreground: 0 0% 98%;
    --border: 20 30% 16%;
    --input: 20 30% 16%;
    --ring: 24 95% 55%;
    --sidebar-background: 20 50% 8%;
    --sidebar-foreground: 24 100% 98%;
    --sidebar-primary: 24 95% 55%;
    --sidebar-primary-foreground: 20 50% 8%;
    --sidebar-accent: 20 30% 16%;
    --sidebar-accent-foreground: 24 100% 98%;
    --sidebar-border: 20 30% 16%;
    --sidebar-ring: 24 95% 55%;
    --chart-1: 24 95% 55%;
    --chart-2: 20 30% 16%;
    --chart-3: 20 30% 16%;
    --chart-4: 142 69% 28%;
    --chart-5: 38 92% 40%;
    --radius: 0.5rem;
  }
}

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

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-feature-settings: "rlig" 1, "calt" 1;
}

/* Smooth theme transitions */
*,
*::before,
*::after {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none;
  }
}

/* Theme utility classes */

/* Backgrounds */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-success { background-color: hsl(var(--success)); }
.bg-warning { background-color: hsl(var(--warning)); }

/* Text colors */
.text-foreground { color: hsl(var(--foreground)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.text-success { color: hsl(var(--success)); }
.text-success-foreground { color: hsl(var(--success-foreground)); }
.text-warning { color: hsl(var(--warning)); }
.text-warning-foreground { color: hsl(var(--warning-foreground)); }

/* Borders */
.border-border { border-color: hsl(var(--border)); }
.border-input { border-color: hsl(var(--input)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-secondary { border-color: hsl(var(--secondary)); }
.border-destructive { border-color: hsl(var(--destructive)); }
.border-success { border-color: hsl(var(--success)); }
.border-warning { border-color: hsl(var(--warning)); }

/* Ring (focus) */
.ring-ring { --tw-ring-color: hsl(var(--ring)); }

/* Rounded corners using theme radius */
.rounded-theme { border-radius: var(--radius); }
.rounded-theme-sm { border-radius: calc(var(--radius) - 0.25rem); }
.rounded-theme-md { border-radius: calc(var(--radius) + 0.25rem); }
.rounded-theme-lg { border-radius: calc(var(--radius) + 0.5rem); }

/* Common component patterns */
.card-theme {
  background-color: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
}

.btn-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: var(--radius);
}

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

.btn-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
  border-radius: var(--radius);
}

.btn-secondary:hover {
  background-color: hsl(var(--secondary) / 0.8);
}

.btn-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
  border-radius: var(--radius);
}

.btn-destructive:hover {
  background-color: hsl(var(--destructive) / 0.9);
}

.input-theme {
  background-color: transparent;
  border: 1px solid hsl(var(--input));
  border-radius: var(--radius);
}

.input-theme:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring) / 0.5);
}

/* Badge variants */
.badge-primary {
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
}

.badge-secondary {
  background-color: hsl(var(--secondary));
  color: hsl(var(--secondary-foreground));
}

.badge-destructive {
  background-color: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

.badge-success {
  background-color: hsl(var(--success));
  color: hsl(var(--success-foreground));
}

.badge-warning {
  background-color: hsl(var(--warning));
  color: hsl(var(--warning-foreground));
}