/*
 * PayStream auth-page tokens (API host).
 * Mirrors the Blazor client's design tokens so the sign-in flow looks like the console.
 */
:root {
    --ps-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --ps-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

    --ps-gray-50: #f8fafc;
    --ps-gray-100: #f1f5f9;
    --ps-gray-200: #e2e8f0;
    --ps-gray-300: #cbd5e1;
    --ps-gray-400: #94a3b8;
    --ps-gray-500: #64748b;
    --ps-gray-600: #475569;
    --ps-gray-700: #334155;
    --ps-gray-800: #1e293b;
    --ps-gray-900: #0f172a;

    --ps-ink: var(--ps-gray-900);
    --ps-ink-soft: var(--ps-gray-700);
    --ps-muted: var(--ps-gray-500);
    --ps-bg: #f6f7f9;
    --ps-surface: #ffffff;
    --ps-surface-2: var(--ps-gray-50);
    --ps-border: var(--ps-gray-200);
    --ps-border-strong: var(--ps-gray-300);

    --ps-brand-1: #5633ff;
    --ps-brand-2: #19004a;
    --ps-brand-3: #7455ff;
    --ps-primary: var(--ps-brand-1);
    --ps-primary-strong: #3f21d1;
    --ps-primary-soft: #efecff;
    --ps-primary-soft-2: #e2dcff;
    --ps-login-gradient: radial-gradient(circle at top right, var(--ps-brand-1), var(--ps-brand-2) 60%);

    /* Brand panel on the sign-in, password and authenticator pages */
    --ps-auth-aside-bg:
        radial-gradient(90% 60% at 100% 0%, rgba(116, 85, 255, 0.55) 0%, rgba(116, 85, 255, 0) 70%),
        radial-gradient(70% 50% at 0% 100%, rgba(86, 51, 255, 0.35) 0%, rgba(86, 51, 255, 0) 70%),
        var(--ps-brand-2);
    --ps-auth-aside-ink: #ffffff;
    --ps-auth-aside-muted: rgba(255, 255, 255, 0.72);
    --ps-auth-aside-line: rgba(255, 255, 255, 0.14);
    --ps-auth-aside-tile: rgba(255, 255, 255, 0.08);
    --ps-auth-aside-flow: #b3a3ff;

    --ps-success: #16a34a;
    --ps-success-soft: #dcfce7;
    --ps-success-text: #166534;
    --ps-warning: #d97706;
    --ps-warning-soft: #fef3c7;
    --ps-warning-text: #92400e;
    --ps-danger: #dc2626;
    --ps-danger-soft: #fee2e2;
    --ps-danger-text: #991b1b;
    --ps-info: #0284c7;
    --ps-info-soft: #e0f2fe;
    --ps-info-text: #075985;

    --ps-radius-sm: 4px;
    --ps-radius-md: 6px;
    --ps-radius-lg: 8px;
    --ps-radius-xl: 12px;

    --ps-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
    --ps-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
    --ps-shadow-md: 0 4px 16px rgba(15, 23, 42, 0.10);

    --ps-focus-ring: 0 0 0 3px rgba(86, 51, 255, 0.22);
}