/* Oban.Console design tokens — Pixa / Xyxio look (dark institutional).
   Source: C:\Projects\V4 Pixa 2 Design/PIXA_UI_Look_and_Feel.md
   Consumed via wwwroot/css/design-tokens.css. Do not duplicate hex in component CSS. */

:root {
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;

    --font-size-xs: 12px;
    --line-height-xs: 16px;
    --font-size-sm: 14px;
    --line-height-sm: 20px;
    --font-size-base: 16px;
    --line-height-base: 24px;
    --font-size-lg: 18px;
    --line-height-lg: 28px;
    --font-size-xl: 20px;
    --line-height-xl: 28px;
    --font-size-2xl: 24px;
    --line-height-2xl: 32px;
    --font-size-3xl: 30px;
    --line-height-3xl: 36px;

    --console-font-sans: "Inter", "Segoe UI", system-ui, sans-serif;
    --console-font-display: "Plus Jakarta Sans", "Inter", sans-serif;
    --console-font-mono: Consolas, "Courier New", monospace;

    --console-color-brand: #0ea5e9;
    --console-color-brand-dark: #2563eb;
    --console-color-azure: #0078d4;
    --console-color-azure-ink: #0b1f4d;
    --console-color-accent: #38bdf8;
    --console-color-canvas: #020617;
    --console-color-surface: #0f172a;
    --console-color-glass: rgba(15, 23, 42, 0.9);
    --console-color-glass-border: rgba(255, 255, 255, 0.12);
    --console-color-border: rgba(255, 255, 255, 0.18);
    --console-color-hero-glow: rgba(14, 165, 233, 0.12);
    --console-color-text-primary: #f8fafc;
    --console-color-text-secondary: #e2e8f0;
    --console-color-text-muted: #cbd5e1;
    --console-color-text-label: #94a3b8;
    --console-color-link: #7dd3fc;
    --console-color-link-hover: #bae6fd;
    --console-color-overlay: rgba(2, 6, 23, 0.75);

    --console-radius: 12px;
    --console-radius-lg: 20px;
    --console-content-max-width: 1760px;
    --console-shadow: 0 20px 45px rgba(2, 6, 23, 0.45);
    --console-glow: 0 12px 30px -5px rgba(14, 165, 233, 0.5);

    --console-bg: var(--console-color-canvas);
    --console-text: var(--console-color-text-primary);
    --console-muted: var(--console-color-text-muted);
    --console-border: var(--console-color-glass-border);
    --console-primary: var(--console-color-brand);
    --console-accent: var(--console-color-accent);
    --tile-bg: var(--console-color-glass);
    --product-map-column-gap: var(--space-5);
    --product-map-row-gap: var(--space-3);

    --tile-supersend: rgba(245, 158, 11, 0.22);
    --tile-supersend-edge: #f59e0b;
    --tile-superstream: rgba(251, 191, 36, 0.28);
    --tile-superstream-edge: #fbbf24;
    --tile-supertrust: #f59e0b;
    --tile-supertrust-ink: #422006;
    --tile-supertrust-edge: #fde68a;
    --tile-supertrust-glow: 0 16px 36px -6px rgba(245, 158, 11, 0.55);
    --tile-bankhost: rgba(20, 184, 166, 0.28);
    --tile-bankhost-edge: #14b8a6;
    --tile-bankstream: rgba(13, 148, 136, 0.22);
    --tile-bankstream-edge: #0d9488;
    --tile-lifestream: rgba(139, 92, 246, 0.24);
    --tile-lifestream-edge: #8b5cf6;
    --tile-life-office: rgba(124, 58, 237, 0.28);
    --tile-life-office-edge: #7c3aed;
    --tile-fund-manager: rgba(217, 70, 239, 0.24);
    --tile-fund-manager-edge: #d946ef;
    --tile-fundstream: rgba(192, 132, 252, 0.24);
    --tile-fundstream-edge: #c084fc;
    --tile-issuer: rgba(148, 163, 184, 0.22);
    --tile-issuer-edge: #94a3b8;
    --tile-custodian: rgba(168, 162, 158, 0.22);
    --tile-custodian-edge: #a8a29e;

    --status-healthy: #34d399;
    --status-unhealthy: #f87171;
    --status-unknown: #94a3b8;
    --status-notdeployed: #475569;
    --status-warning: #fbbf24;

    --hit-target: 44px;
}

.theme-light {
    --console-color-canvas: #f8fafc;
    --console-color-surface: #ffffff;
    --console-color-glass: rgba(255, 255, 255, 0.92);
    --console-color-glass-border: #e2e8f0;
    --console-color-border: #cbd5e1;
    --console-color-hero-glow: rgba(14, 165, 233, 0.08);
    --console-color-text-primary: #0f172a;
    --console-color-text-secondary: #1e293b;
    --console-color-text-muted: #475569;
    --console-color-text-label: #64748b;
    --console-color-link: #0369a1;
    --console-color-link-hover: #0ea5e9;
    --console-color-overlay: rgba(248, 250, 252, 0.75);
    --console-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
    --status-healthy: #16a34a;
    --status-unhealthy: #dc2626;
    --status-notdeployed: #cbd5e1;
}