:root {
    --color-bg: #eef2f7;
    --color-surface: #ffffff;
    --color-border: #e2e8f0;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-primary: #3b82f6;
    --color-primary-hover: #2563eb;
    --color-header-bg: #005887;
    --color-header-text: #ffffff;
    --color-header-muted: #bcdcec;
    --color-header-border: rgba(255, 255, 255, .18);
    --color-danger: #dc2626;
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fecaca;
    --color-success-text: #065f46;
    --color-success-bg: #ecfdf5;
    --color-success-border: #a7f3d0;
    --color-warning-bg: #fffbeb;
    --color-warning-text: #92400e;
    --color-warning-border: #fde68a;
    --color-input-border: #cbd5e1;
    --color-input-bg: #ffffff;
    --color-badge-bg: #e2e8f0;
    --color-badge-text: #334155;
    --color-badge-admin-bg: #dbeafe;
    --color-badge-admin-text: #1d4ed8;
    --shadow-card: 0 1px 3px rgba(15, 23, 42, .08);
}

[data-theme="dark"] {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-border: #334155;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-primary: #3b82f6;
    --color-primary-hover: #60a5fa;
    --color-header-muted: #94b8cc;
    --color-header-border: rgba(255, 255, 255, .12);
    --color-danger: #f87171;
    --color-danger-bg: #3f1d1d;
    --color-danger-border: #7f1d1d;
    --color-success-text: #6ee7b7;
    --color-success-bg: #052e28;
    --color-success-border: #065f46;
    --color-warning-bg: #3f2a06;
    --color-warning-text: #fbbf24;
    --color-warning-border: #92400e;
    --color-input-border: #475569;
    --color-input-bg: #0f172a;
    --color-badge-bg: #334155;
    --color-badge-text: #cbd5e1;
    --color-badge-admin-bg: #1e3a8a;
    --color-badge-admin-text: #bfdbfe;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, .5);
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--color-header-border);
    color: var(--color-header-text);
    width: 30px;
    height: 30px;
    border-radius: 999px;
    cursor: pointer;
    font-size: .875rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, .12);
}