:root {
    --font-size: 16px;
    --background: #ffffff;
    --foreground: oklch(0.145 0 0);
    --card: #ffffff;
    --card-foreground: oklch(0.145 0 0);
    --popover: #ffffff;
    --popover-foreground: oklch(0.145 0 0);
    --primary: #030213;
    --primary-foreground: oklch(1 0 0);
    --secondary: oklch(0.95 0.0058 264.53);
    --secondary-foreground: #030213;
    --muted: #ececf0;
    --muted-foreground: #717182;
    --accent: #e9ebef;
    --accent-foreground: #030213;
    --destructive: #d4183d;
    --destructive-foreground: #ffffff;
    --border: rgba(0, 0, 0, 0.1);
    --input: rgba(0, 0, 0, 0.1);
    --input-background: #f3f3f5;
    --ring: oklch(0.145 0 0);
    --switch-background: #cbced4;
    --radius: 0.625rem;
}

.dark {
    --font-size: 16px;
    --background: #0f172a;
    --foreground: #e2e8f0;
    --card: #1e293b;
    --card-foreground: #e2e8f0;
    --popover: #1e293b;
    --popover-foreground: #e2e8f0;
    --primary: #e2e8f0;
    --primary-foreground: #0f172a;
    --secondary: #334155;
    --secondary-foreground: #e2e8f0;
    --muted: #334155;
    --muted-foreground: #94a3b8;
    --accent: #334155;
    --accent-foreground: #e2e8f0;
    --destructive: #ef4444;
    --destructive-foreground: #ffffff;
    --border: rgba(255, 255, 255, 0.1);
    --input: rgba(255, 255, 255, 0.1);
    --input-background: #1e293b;
    --ring: #e2e8f0;
    --switch-background: #475569;
    --radius: 0.625rem;
}

/* Typography defaults */
h1 {
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.5;
}
h2 {
    font-size: 1.25rem;
    font-weight: 500;
}
h3 {
    font-size: 1.125rem;
    font-weight: 500;
}
h4 {
    font-size: 1rem;
    font-weight: 500;
}

/* Custom component styles */
.btn-primary {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 text-white font-medium px-4 py-2 rounded-xl shadow-lg shadow-blue-500/25 transition-all;
}
.btn-success {
    @apply bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white font-medium px-4 py-2 rounded-xl shadow-lg shadow-green-500/25 transition-all;
}
.btn-admin {
    @apply bg-gradient-to-r from-violet-600 to-purple-600 hover:from-violet-700 hover:to-purple-700 text-white font-medium px-4 py-2 rounded-xl shadow-lg shadow-violet-500/25 transition-all;
}
.btn-danger {
    @apply bg-gradient-to-r from-red-600 to-red-700 hover:from-red-700 hover:to-red-800 text-white font-medium px-4 py-2 rounded-xl shadow-lg shadow-red-500/25 transition-all;
}
.btn-outline {
    @apply border border-slate-200 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-300 font-medium px-4 py-2 rounded-xl transition-all dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200 dark:hover:bg-slate-700 dark:hover:border-slate-500;
}

/* Card styles */
.card {
    @apply bg-white border border-slate-200 rounded-xl shadow-sm dark:bg-slate-800 dark:border-slate-700;
}
.card-hover {
    @apply hover:shadow-lg transition-all;
}

/* Badge styles */
.badge-blue {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-blue-50 text-blue-700 border border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800;
}
.badge-green {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-green-50 text-green-700 border border-green-200 dark:bg-green-900/30 dark:text-green-300 dark:border-green-800;
}
.badge-violet {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-violet-50 text-violet-700 border border-violet-200 dark:bg-violet-900/30 dark:text-violet-300 dark:border-violet-800;
}
.badge-emerald {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800;
}
.badge-cyan {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-cyan-50 text-cyan-700 border border-cyan-200 dark:bg-cyan-900/30 dark:text-cyan-300 dark:border-cyan-800;
}
.badge-purple {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-purple-50 text-purple-700 border border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800;
}
.badge-red {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-red-50 text-red-700 border border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800;
}
.badge-amber {
    @apply inline-flex items-center px-2 py-0.5 rounded-md text-xs font-medium bg-amber-50 text-amber-700 border border-amber-200 dark:bg-amber-900/30 dark:text-amber-300 dark:border-amber-800;
}

/* Stat card variants */
.stat-blue {
    @apply p-3 bg-blue-50 rounded-lg border border-blue-200 dark:bg-blue-900/20 dark:border-blue-800;
}
.stat-green {
    @apply p-3 bg-green-50 rounded-lg border border-green-200 dark:bg-green-900/20 dark:border-green-800;
}
.stat-red {
    @apply p-3 bg-red-50 rounded-lg border border-red-200 dark:bg-red-900/20 dark:border-red-800;
}
.stat-amber {
    @apply p-3 bg-amber-50 rounded-lg border border-amber-200 dark:bg-amber-900/20 dark:border-amber-800;
}

/* DOC Index gradient text */
.gradient-text {
    @apply bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text;
    -webkit-text-fill-color: transparent;
}

/* Progress bar */
.progress-bar {
    @apply h-2 bg-white rounded-full overflow-hidden dark:bg-slate-700;
}
.progress-fill {
    @apply h-full rounded-full;
}

/* Dialog/Modal overlay */
.dialog-overlay {
    @apply fixed inset-0 bg-black/50 z-50 flex items-center justify-center;
}
.dialog-content {
    @apply bg-white rounded-2xl shadow-2xl max-h-[85vh] overflow-y-auto dark:bg-slate-800;
}

/* Form inputs */
.form-input {
    @apply w-full px-3 py-2 border border-slate-200 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200;
}
.form-select {
    @apply w-full px-3 py-2 border border-slate-200 rounded-lg bg-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent dark:border-slate-600 dark:bg-slate-800 dark:text-slate-200;
}