@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/*
 * PayStream design tokens.
 * Neutral, enterprise-grade palette: gray surfaces, one brand accent, semantic colours only
 * for status. Every component style in app-shell.css / main.css reads from these variables.
 */
:root {
    /* Typography */
    --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-font-display: var(--ps-font-sans);

    --ps-font-size-h1: 1.375rem;
    --ps-font-size-h2: 1.125rem;
    --ps-font-size-h3: 1rem;
    --ps-font-size-body: 0.875rem;
    --ps-font-size-sm: 0.8125rem;
    --ps-font-size-caption: 0.75rem;

    /* Neutral scale */
    --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);

    /* Brand accent */
    --ps-brand-1: #5633ff;
    --ps-brand-2: #19004a;
    --ps-brand-3: #7455ff;
    --ps-primary: var(--ps-brand-1);
    --ps-primary-rgb: 86, 51, 255;
    --ps-primary-strong: #3f21d1;
    --ps-primary-soft: #efecff;
    --ps-primary-soft-2: #e2dcff;
    --ps-secondary: #6d5bff;
    --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;

    /* Semantic */
    --ps-success: #16a34a;
    --ps-success-soft: #dcfce7;
    --ps-success-text: #166534;
    --ps-warning: #d97706;
    --ps-warning-strong: #b45309;
    --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-neutral-soft: var(--ps-gray-100);
    --ps-neutral-text: var(--ps-gray-700);

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

    /* Elevation: flat by default, shadows only for floating surfaces */
    --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-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.16);

    /* Spacing */
    --ps-space-1: 4px;
    --ps-space-2: 8px;
    --ps-space-3: 12px;
    --ps-space-4: 16px;
    --ps-space-5: 20px;
    --ps-space-6: 24px;
    --ps-space-7: 32px;
    --ps-space-8: 48px;

    /* Component sizes */
    --ps-size-input-height: 36px;
    --ps-size-input-height-sm: 30px;
    --ps-size-button-height: 36px;
    --ps-size-button-height-sm: 30px;
    --ps-size-table-row: 44px;
    --ps-size-sidebar-width: 280px;
    --ps-size-sidebar-collapsed-width: 72px;
    --ps-size-topbar-height: 56px;

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

    /* Legacy aliases still referenced by page-scoped styles */
    --paystream-accent: var(--ps-primary);
    --paystream-accent-strong: var(--ps-primary-strong);
    --paystream-accent-warm: var(--ps-warning);
    --paystream-border: var(--ps-border);
    --paystream-surface: var(--ps-surface);
    --paystream-surface-2: var(--ps-surface-2);
    --paystream-bg: var(--ps-bg);
    --paystream-shadow: var(--ps-shadow-sm);
    --paystream-shadow-soft: var(--ps-shadow-xs);
    --paystream-radius: var(--ps-radius-lg);
    --paystream-radius-sm: var(--ps-radius-md);
    --paystream-sidebar-bg: var(--ps-surface);
    --paystream-login-bg: var(--ps-login-gradient);

    /* Bootstrap bridge (both the 5.1 base bundle and the LeptonX 5.3 theme read these) */
    --bs-body-font-family: var(--ps-font-sans);
    --bs-font-sans-serif: var(--ps-font-sans);
    --bs-font-monospace: var(--ps-font-mono);
    --bs-body-font-size: var(--ps-font-size-body);
    --bs-body-line-height: 1.5;
    --bs-body-color: var(--ps-ink);
    --bs-body-color-rgb: 15, 23, 42;
    --bs-body-bg: var(--ps-bg);
    --bs-body-bg-rgb: 246, 247, 249;
    --bs-emphasis-color: var(--ps-ink);
    --bs-secondary-color: var(--ps-muted);
    --bs-secondary-bg: var(--ps-gray-100);
    --bs-tertiary-bg: var(--ps-gray-50);
    --bs-heading-color: var(--ps-ink);
    --bs-border-color: var(--ps-border);
    --bs-border-color-translucent: rgba(15, 23, 42, 0.1);
    --bs-border-radius: var(--ps-radius-md);
    --bs-border-radius-sm: var(--ps-radius-sm);
    --bs-border-radius-lg: var(--ps-radius-lg);
    --bs-border-radius-xl: var(--ps-radius-xl);
    --bs-link-color: var(--ps-primary-strong);
    --bs-link-color-rgb: 63, 33, 209;
    --bs-link-hover-color: var(--ps-primary);
    --bs-link-hover-color-rgb: 86, 51, 255;
    --bs-code-color: var(--ps-gray-700);
    --bs-primary: var(--ps-primary);
    --bs-primary-rgb: 86, 51, 255;
    --bs-secondary: var(--ps-gray-600);
    --bs-secondary-rgb: 71, 85, 105;
    --bs-success: var(--ps-success);
    --bs-success-rgb: 22, 163, 74;
    --bs-danger: var(--ps-danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: var(--ps-warning);
    --bs-warning-rgb: 217, 119, 6;
    --bs-info: var(--ps-info);
    --bs-info-rgb: 2, 132, 199;
    --bs-light: var(--ps-gray-50);
    --bs-light-rgb: 248, 250, 252;
    --bs-dark: var(--ps-ink);
    --bs-dark-rgb: 15, 23, 42;

    /* Blazorise snackbar */
    --b-snackbar-background: var(--ps-gray-900);
    --b-snackbar-text-color: #f8fafc;
    --b-snackbar-background-success: var(--ps-success-soft);
    --b-snackbar-text-success: var(--ps-success-text);
    --b-snackbar-background-danger: var(--ps-danger-soft);
    --b-snackbar-text-danger: var(--ps-danger-text);
    --b-snackbar-background-warning: var(--ps-warning-soft);
    --b-snackbar-text-warning: var(--ps-warning-text);
    --b-snackbar-background-info: var(--ps-info-soft);
    --b-snackbar-text-info: var(--ps-info-text);
}