@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: url("../../fonts/plus-jakarta-sans/PlusJakartaSans-Variable.woff2") format("woff2");
}

@font-face {
    font-family: "Plus Jakarta Sans";
    font-style: italic;
    font-weight: 400 800;
    font-display: swap;
    src: url("../../fonts/plus-jakarta-sans/PlusJakartaSans-Italic-Variable.woff2") format("woff2");
}

:root {
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-heading: var(--font-sans);
    --font-brand: var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --ink: #18181b;
    --ink-2: #3f3f46;
    --ink-3: #52525b;
    --muted: #71717a;
    --muted-2: #a1a1aa;
    --muted-3: #c4c4cc;
    --white: #ffffff;
    --white-22: rgb(255 255 255 / 0.22);
    --bg: #f2f3f9;
    --surface: #fafbfc;
    --surface-2: #f7f7f9;
    --surface-3: #f4f4f5;
    --surface-4: #edeff3;
    --line: #ececef;
    --line-soft: #efeff1;
    --line-2: #f0f0f2;
    --line-3: #f3f3f5;
    --track: #eef1f6;

    --blue: #87c6fe;
    --blue-ink: #2a6fdb;
    --lilac: #cbcaff;
    --lilac-ink: #5b57c2;
    --lilac-soft: #efeeff;
    --grad-blue: #8fc9fe;
    --grad-blue-mobile: #8fc9fe;
    --grad-lilac-mid: #b7bcff;
    --grad-lilac: #cfc9ff;
    --grad-lilac-mobile: #c7c5ff;
    --grad: linear-gradient(128deg, var(--grad-blue) 0%, var(--grad-lilac-mid) 54%, var(--grad-lilac) 100%);
    --grad-soft: linear-gradient(135deg, #e8f1ff 0%, #f1ecff 100%);
    --ring-blue: #5aa9f8;
    --ring-blue-rgb: 90 169 248;
    --ring-lilac: #9e97ff;
    --loader-green: #3fcba3;
    --page-loader-bg: #f4f5f7;
    --audience-coral: #ffd7c2;
    --audience-blue: #c9e2ff;
    --audience-lilac: #d9d4ff;

    --ok: #1f9d57;
    --ok-label: #1f8a5b;
    --warn: #e0a422;
    --warn-label: #b45309;
    --danger: #e5544b;
    --danger-label: #dc2626;
    --danger-2: #f43f5e;
    --below-label: #c2356a;
    --danger-soft-bg: #fde7e7;
    --danger-soft-ink: #da3d3d;
    --no-data: #d4d4d8;
    --no-data-label: #71717a;

    --flow-blue: #5b8def;
    --flow-blue-2: #9cb7ff;
    --flow-purple: #7c5cfc;
    --flow-purple-2: #a98bff;
    --flow-lilac: #8b7bf0;
    --flow-lilac-2: #b9b6ff;
    --flow-green: #1f9d57;
    --flow-green-2: #5fd08c;
    --flow-pink: #ec4899;
    --flow-pink-2: #f8a0c8;
    --flow-teal: #0d9488;
    --flow-teal-2: #4fd1c5;
    --flow-amber: #f59e0b;
    --flow-amber-2: #f6c445;
    --flow-muted: #8b8ca4;
    --flow-muted-2: #c4c4cc;
    --flow-orb: radial-gradient(circle at 36% 30%, #a6d3ff, #b9b6ff 44%, #f0c9da 78%, #fbd9c0);

    --cosmos-bg: radial-gradient(120% 130% at 70% 20%, #15182a, #0b0d18 60%, #070810);

    --r-xs: 8px;
    --r-sm: 11px;
    --r: 14px;
    --r-lg: 18px;
    --r-xl: 22px;
    --r-2xl: 30px;
    --pill: 999px;

    --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04);
    --shadow-pop: 0 18px 40px -18px rgba(16, 24, 40, 0.2);
    --shadow-float: 0 30px 60px -18px rgba(45, 42, 95, 0.5), 0 6px 16px rgba(45, 42, 95, 0.16);
    --shadow-mobile-float: 0 24px 48px -16px rgba(45, 42, 95, 0.46);
    --focus-ring: 0 0 0 4px rgba(24, 24, 27, 0.1);

    --shell-sidebar-w: 260px;
    --shell-rail-w: 72px;
    --shell-topbar-h: 72px;
    --topbar-height: var(--shell-topbar-h);
    --app-module-rail-width: var(--shell-rail-w);
    --app-module-panel-width: calc(var(--shell-sidebar-w) - var(--shell-rail-w));
    --app-module-sidebar-width: var(--shell-sidebar-w);
    --app-sidebar-width: var(--shell-sidebar-w);
    --sidebar-width: var(--shell-sidebar-w);
    --active-sidebar-width: var(--shell-sidebar-w);
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-right: env(safe-area-inset-right, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-left: env(safe-area-inset-left, 0px);
    --pwa-status-top-fallback: 0px;
    --pwa-status-bar-h: 0px;
    --shell-mobile-safe-top: max(var(--safe-area-top), var(--pwa-status-top-fallback));
    --content-max: 1280px;
    --app-view-max-width: var(--content-max);
    --content-pad-x: clamp(24px, 3vw, 48px);
    --content-pad-y: 40px;

    --z-sidebar: 80;
    --z-topbar: 70;
    --z-sidebar-flyout: 90;
    --z-overlay: 120;
}

html.is-standalone-pwa:not(.is-iphone-shell) {
    --pwa-status-top-fallback: 32px;
}

@media (min-width: 901px) and (max-width: 1366px) {
    html.is-standalone-pwa:not(.is-iphone-shell) {
        --pwa-status-bar-h: 32px;
    }

    html.is-standalone-pwa:not(.is-iphone-shell)::before {
        content: "";
        position: fixed;
        inset: 0 0 auto;
        z-index: calc(var(--z-overlay) + 20);
        height: var(--pwa-status-bar-h);
        background: var(--ink);
    }
}