:root {
    --primary: #4f46e5;
    --primary-hover: #3d34d3;
    --primary-light: rgba(79, 70, 229, 0.12);
    --primary-rgb: 79, 70, 229;

    --secondary: #0f172a;
    --secondary-hover: #000518;
    --secondary-light: rgba(15, 23, 42, 0.12);
    --secondary-rgb: 15, 23, 42;
}

body[data-theme="dark"] {
    --bg-main: #0b1220;
    --bg-surface: #101a2c;
    --text-main: #e5edf9;
    --text-muted: #8ea3c7;
    --border-color: #1f2a40;
    --slate-50: #101a2c;
    --slate-100: #1a2438;
    --slate-200: #22314a;
    --slate-300: #2f4261;
    --slate-400: #5d759c;
    --slate-500: #8ea3c7;
    --slate-600: #afc0dd;
    --slate-700: #cfdbef;
    --slate-800: #e5edf9;
    --slate-900: #f5f9ff;
}

@media (prefers-color-scheme: dark) {
    body[data-theme="system"] {
        --bg-main: #0b1220;
        --bg-surface: #101a2c;
        --text-main: #e5edf9;
        --text-muted: #8ea3c7;
        --border-color: #1f2a40;
        --slate-50: #101a2c;
        --slate-100: #1a2438;
        --slate-200: #22314a;
        --slate-300: #2f4261;
        --slate-400: #5d759c;
        --slate-500: #8ea3c7;
        --slate-600: #afc0dd;
        --slate-700: #cfdbef;
        --slate-800: #e5edf9;
        --slate-900: #f5f9ff;
    }
}

.brand-logo-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.login-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: 16px;
    background: #ffffff;
    padding: 8px;
}