/* SignalBX design tokens — generated by gen_tokens.py; shared by the app and the website.
   Layers: --p-* primitives → --c-* semantic (theme-aware) → component aliases.
   Theme: light by default (<html data-theme="light">); [data-theme="dark"] opts into dark. */
:root {
  color-scheme: light;
  --p-blue-50: #eef4ff;
  --p-blue-100: #dce7fe;
  --p-blue-200: #bfd3fe;
  --p-blue-300: #93b4fb;
  --p-blue-400: #6190f6;
  --p-blue-500: #3d6ff0;
  --p-blue-600: #2855df;
  --p-blue-700: #2144b8;
  --p-blue-800: #1f3a91;
  --p-blue-900: #1d3373;
  --p-slate-0: #ffffff;
  --p-slate-25: #fbfcfd;
  --p-slate-50: #f6f8fa;
  --p-slate-100: #eef1f5;
  --p-slate-200: #e3e8ee;
  --p-slate-300: #cfd7e1;
  --p-slate-400: #9aa6b5;
  --p-slate-500: #6a7787;
  --p-slate-600: #525e6e;
  --p-slate-700: #3a4555;
  --p-slate-800: #232e3e;
  --p-slate-850: #18212f;
  --p-slate-900: #111825;
  --p-slate-950: #0a101b;
  --p-navy-900: #0b1526;
  --p-navy-800: #142b3f;
  --p-lime-400: #c9ff20;
  --p-lime-100: #f1ffd0;
  --p-mint-400: #2ee6bc;
  --p-mint-100: #dcfaf1;
  --p-green-50: #e9f8f1;
  --p-green-500: #14a46c;
  --p-green-600: #087a50;
  --p-green-700: #086a46;
  --p-amber-50: #fff6e5;
  --p-amber-400: #f5a524;
  --p-amber-600: #a35a00;
  --p-amber-700: #844700;
  --p-red-50: #fdeef0;
  --p-red-500: #e5484d;
  --p-red-600: #c9303c;
  --p-red-700: #a42330;
  --p-violet-50: #f3efff;
  --p-violet-500: #7c5cff;
  --p-violet-600: #6440e6;
  --c-bg: var(--p-slate-50);
  --c-bg-subtle: var(--p-slate-25);
  --c-surface: var(--p-slate-0);
  --c-surface-raised: var(--p-slate-0);
  --c-surface-sunken: var(--p-slate-50);
  --c-surface-muted: var(--p-slate-100);
  --c-surface-hover: #f3f6fd;
  --c-surface-selected: var(--p-blue-50);
  --c-surface-inverse: var(--p-navy-900);
  --c-surface-glass: rgb(255 255 255 / 0.78);
  --c-ink-surface: var(--p-navy-900);
  --c-ink-surface-2: var(--p-navy-800);
  --c-on-ink: #ffffff;
  --c-border: var(--p-slate-200);
  --c-border-subtle: #edf0f4;
  --c-border-strong: var(--p-slate-300);
  --c-text: var(--p-navy-900);
  --c-text-secondary: var(--p-slate-700);
  --c-text-muted: var(--p-slate-600);
  --c-text-subtle: var(--p-slate-500);
  --c-text-disabled: var(--p-slate-400);
  --c-text-inverse: var(--p-slate-0);
  --c-primary: var(--p-blue-600);
  --c-primary-hover: var(--p-blue-700);
  --c-primary-active: var(--p-blue-800);
  --c-primary-soft: var(--p-blue-100);
  --c-primary-softer: var(--p-blue-50);
  --c-primary-border: var(--p-blue-200);
  --c-on-primary: #ffffff;
  --c-action: var(--p-navy-900);
  --c-action-hover: var(--p-navy-800);
  --c-on-action: #ffffff;
  --c-focus-ring: rgb(40 85 223 / 0.45);
  --c-success: var(--p-green-600);
  --c-success-strong: var(--p-green-700);
  --c-success-soft: var(--p-green-50);
  --c-success-fill: var(--p-green-500);
  --c-warning: var(--p-amber-600);
  --c-warning-strong: var(--p-amber-700);
  --c-warning-soft: var(--p-amber-50);
  --c-warning-fill: var(--p-amber-400);
  --c-danger: var(--p-red-600);
  --c-danger-strong: var(--p-red-700);
  --c-danger-soft: var(--p-red-50);
  --c-danger-fill: var(--p-red-500);
  --c-info: var(--p-blue-600);
  --c-info-soft: var(--p-blue-50);
  --c-violet: var(--p-violet-600);
  --c-violet-soft: var(--p-violet-50);
  --c-accent: var(--p-lime-400);
  --c-accent-soft: var(--p-lime-100);
  --c-accent-ink: var(--p-navy-900);
  --c-mint: var(--p-mint-400);
  --c-mint-soft: var(--p-mint-100);
  --c-scrim: rgb(10 16 27 / 0.52);
  --c-shadow-color: 220 40% 12%;
  --c-glow-primary: rgb(61 111 240 / 0.28);
  --c-glow-mint: rgb(46 230 188 / 0.22);
  --c-skeleton-base: var(--p-slate-100);
  --c-skeleton-shine: var(--p-slate-50);
  --c-dot-grid: #e4e8ee;
  --c-chart-1: #3d6ff0;
  --c-chart-2: #8b5cf6;
  --c-chart-3: #14a46c;
  --c-chart-4: #f5a524;
  --c-chart-5: #e5484d;
  --c-chart-pending: #b6c0cd;
  --c-chart-grid: #eef1f5;
  --c-chart-track: #eef1f5;
  --c-chart-heat-0: #f2f5f9;

  /* Typography — one family, one scale */
  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --text-2xs: 0.6875rem;  /* 11 — micro labels only */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.8125rem;   /* 13 */
  --text-base: 0.875rem;  /* 14 — app body */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: 1.25rem;     /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.25rem;    /* 36 */
  --text-5xl: 3rem;       /* 48 */
  --text-6xl: 3.75rem;    /* 60 */
  --leading-tight: 1.1;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;
  --tracking-tighter: -0.035em;
  --tracking-tight: -0.022em;
  --tracking-snug: -0.011em;
  --tracking-wide: 0.06em;

  /* Spacing — 4px base grid */
  --s-0: 0; --s-px: 1px; --s-0-5: 2px; --s-1: 4px; --s-1-5: 6px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; --s-24: 96px;

  /* Radii */
  --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 999px;

  /* Elevation (shadow color flips with theme) */
  --shadow-xs: 0 1px 2px hsl(var(--c-shadow-color) / 0.06);
  --shadow-sm: 0 1px 2px hsl(var(--c-shadow-color) / 0.06), 0 1px 3px hsl(var(--c-shadow-color) / 0.08);
  --shadow-md: 0 2px 4px -1px hsl(var(--c-shadow-color) / 0.06), 0 6px 16px -4px hsl(var(--c-shadow-color) / 0.10);
  --shadow-lg: 0 4px 8px -2px hsl(var(--c-shadow-color) / 0.06), 0 16px 36px -8px hsl(var(--c-shadow-color) / 0.16);
  --shadow-xl: 0 8px 16px -4px hsl(var(--c-shadow-color) / 0.08), 0 32px 64px -12px hsl(var(--c-shadow-color) / 0.24);
  --ring: 0 0 0 3px var(--c-focus-ring);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur-fast: 150ms; --dur-base: 200ms; --dur-slow: 250ms;

  /* Layers */
  --z-base: 0; --z-raised: 10; --z-sticky: 20; --z-header: 30; --z-dropdown: 40; --z-drawer: 50;
  --z-overlay: 60; --z-modal: 70; --z-toast: 80; --z-tooltip: 90;

  /* ---- Website compatibility aliases: legacy names → semantic tokens ---- */
  --color-paper: var(--c-bg);
  --color-paper-2: var(--c-surface-muted);
  --color-surface: var(--c-surface);
  --color-surface-raised: var(--c-surface-raised);
  --color-ink: var(--c-text);
  --color-ink-soft: var(--c-text-secondary);
  --color-muted: var(--c-text-muted);
  --color-rule: var(--c-border);
  --color-rule-strong: var(--c-border-strong);
  --color-accent: var(--c-primary);
  --color-accent-dark: var(--c-primary-hover);
  --color-accent-ink: var(--c-on-primary);
  --color-accent-soft: var(--c-primary-softer);
  --color-graphite: var(--p-navy-900);
  --color-graphite-soft: var(--p-navy-800);
  --color-on-dark: #eef2f7;
  --color-on-dark-muted: #aeb9c7;
  --color-focus: var(--c-primary);
  --color-transparent: transparent;
  --color-auth-paper: var(--c-bg);
  --color-auth-paper-2: var(--c-surface-muted);
  --color-auth-surface: var(--c-surface);
  --color-auth-ink: var(--c-text);
  --color-auth-ink-soft: var(--c-text-secondary);
  --color-auth-muted: var(--c-text-muted);
  --color-auth-rule: var(--c-border);
  --color-auth-rule-strong: var(--c-border-strong);
  --color-auth-accent: var(--c-primary);
  --color-auth-accent-dark: var(--c-primary-hover);
  --color-auth-accent-ink: var(--c-on-primary);
  --color-auth-accent-soft: var(--c-primary-softer);
  --color-auth-focus: var(--c-text);
  --color-auth-error: var(--c-danger);
  --color-auth-error-soft: var(--c-danger-soft);
  --color-auth-success: var(--c-success);
  --color-auth-success-soft: var(--c-success-soft);
  --ink: var(--c-text);
  --muted: var(--c-text-muted);
  --line: var(--c-border);
  --paper: var(--c-bg);
  --white: var(--c-surface);
  --blue: var(--c-primary);
  --violet: var(--c-violet);
  --coral: var(--c-danger-fill);
  --mint: var(--c-mint);
  --mint-dark: var(--c-success);
  --font-display: var(--font-sans);
  --font-body: var(--font-sans);
  --font-outlier: var(--font-mono);

  /* Website scale (kept as-is so page layout does not move) */
  --space-3xs: 0.125rem; --space-2xs: 0.25rem; --space-xs: 0.5rem; --space-sm: 0.75rem; --space-md: 1rem;
  --space-lg: 1.5rem; --space-xl: 2.5rem; --space-2xl: 4rem; --space-3xl: 6rem; --space-4xl: 9rem;
  --space-1: var(--space-xs); --space-2: var(--space-md); --space-3: var(--space-lg); --space-4: var(--space-xl);
  --space-5: var(--space-2xl); --space-6: var(--space-3xl); --space-7: var(--space-4xl);
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.25rem; --text-lg: 1.5625rem;
  --text-xl: 1.9531rem; --text-2xl: 2.4414rem; --text-3xl: 3.0518rem; --text-4xl: 3.8147rem;
  --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-small: clamp(2.6rem, 4vw + 0.75rem, 4.5rem);
  --text-h2: clamp(2.25rem, 3.5vw + 0.5rem, 4rem);
  --radius-control: 999px; --radius-surface: 0.875rem; --radius-panel: 1.5rem; --radius-small: 0.5rem;
  --radius-auth-control: 0.5rem; --radius-auth-panel: 1rem; --size-auth-control: 3rem;
  --rule: 1px solid var(--c-border);
  --rule-strong: 1px solid var(--c-border-strong);
  --shadow-nav: var(--shadow-md);
  --shadow-panel: var(--shadow-lg);
  --shadow: var(--shadow-panel);
  --shadow-auth-panel: var(--shadow-xl);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --dur-micro: 120ms; --dur-short: 200ms; --dur-medium: 250ms; --dur-long: 420ms;
  --banner-height: 4.75rem;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;

}

:root[data-theme="dark"] {
  color-scheme: dark;
  --c-bg: var(--p-slate-950);
  --c-bg-subtle: #0d1420;
  --c-surface: var(--p-slate-900);
  --c-surface-raised: var(--p-slate-850);
  --c-surface-sunken: #0c1320;
  --c-surface-muted: var(--p-slate-850);
  --c-surface-hover: #1a2436;
  --c-surface-selected: #17264a;
  --c-surface-inverse: #e8edf4;
  --c-surface-glass: rgb(17 24 37 / 0.72);
  --c-ink-surface: #162033;
  --c-ink-surface-2: #1d2a40;
  --c-on-ink: #ffffff;
  --c-border: #243042;
  --c-border-subtle: #1b2433;
  --c-border-strong: #33415a;
  --c-text: #e9eef5;
  --c-text-secondary: #c3ccd8;
  --c-text-muted: #9aa6b5;
  --c-text-subtle: #8592a3;
  --c-text-disabled: #5b6778;
  --c-text-inverse: var(--p-navy-900);
  --c-primary: #7aa2ff;
  --c-primary-hover: #9ab8ff;
  --c-primary-active: #b6cbff;
  --c-primary-soft: #1c2d55;
  --c-primary-softer: #152242;
  --c-primary-border: #2f4a85;
  --c-on-primary: var(--p-navy-900);
  --c-action: #e9eef5;
  --c-action-hover: #ffffff;
  --c-on-action: var(--p-navy-900);
  --c-focus-ring: rgb(122 162 255 / 0.55);
  --c-success: #4fd69c;
  --c-success-strong: #7ce3b6;
  --c-success-soft: #0f2c22;
  --c-success-fill: #2fbf85;
  --c-warning: #f7bd5a;
  --c-warning-strong: #fbd28a;
  --c-warning-soft: #33240d;
  --c-warning-fill: #f5a524;
  --c-danger: #ff8088;
  --c-danger-strong: #ffa3a9;
  --c-danger-soft: #3a1519;
  --c-danger-fill: #f0565e;
  --c-info: #7aa2ff;
  --c-info-soft: #152242;
  --c-violet: #b3a0ff;
  --c-violet-soft: #231c45;
  --c-accent: var(--p-lime-400);
  --c-accent-soft: #26300d;
  --c-accent-ink: var(--p-navy-900);
  --c-mint: var(--p-mint-400);
  --c-mint-soft: #0d2e28;
  --c-scrim: rgb(0 0 0 / 0.62);
  --c-shadow-color: 220 60% 2%;
  --c-glow-primary: rgb(122 162 255 / 0.30);
  --c-glow-mint: rgb(46 230 188 / 0.20);
  --c-skeleton-base: #1a2333;
  --c-skeleton-shine: #232e42;
  --c-dot-grid: #18202d;
  --c-chart-1: #6f97ff;
  --c-chart-2: #a78bfa;
  --c-chart-3: #34c98b;
  --c-chart-4: #f7b84b;
  --c-chart-5: #ff6b72;
  --c-chart-pending: #4a5870;
  --c-chart-grid: #1f2938;
  --c-chart-track: #1f2938;
  --c-chart-heat-0: #161f2d;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --c-bg: var(--p-slate-950);
    --c-bg-subtle: #0d1420;
    --c-surface: var(--p-slate-900);
    --c-surface-raised: var(--p-slate-850);
    --c-surface-sunken: #0c1320;
    --c-surface-muted: var(--p-slate-850);
    --c-surface-hover: #1a2436;
    --c-surface-selected: #17264a;
    --c-surface-inverse: #e8edf4;
    --c-surface-glass: rgb(17 24 37 / 0.72);
    --c-ink-surface: #162033;
    --c-ink-surface-2: #1d2a40;
    --c-on-ink: #ffffff;
    --c-border: #243042;
    --c-border-subtle: #1b2433;
    --c-border-strong: #33415a;
    --c-text: #e9eef5;
    --c-text-secondary: #c3ccd8;
    --c-text-muted: #9aa6b5;
    --c-text-subtle: #8592a3;
    --c-text-disabled: #5b6778;
    --c-text-inverse: var(--p-navy-900);
    --c-primary: #7aa2ff;
    --c-primary-hover: #9ab8ff;
    --c-primary-active: #b6cbff;
    --c-primary-soft: #1c2d55;
    --c-primary-softer: #152242;
    --c-primary-border: #2f4a85;
    --c-on-primary: var(--p-navy-900);
    --c-action: #e9eef5;
    --c-action-hover: #ffffff;
    --c-on-action: var(--p-navy-900);
    --c-focus-ring: rgb(122 162 255 / 0.55);
    --c-success: #4fd69c;
    --c-success-strong: #7ce3b6;
    --c-success-soft: #0f2c22;
    --c-success-fill: #2fbf85;
    --c-warning: #f7bd5a;
    --c-warning-strong: #fbd28a;
    --c-warning-soft: #33240d;
    --c-warning-fill: #f5a524;
    --c-danger: #ff8088;
    --c-danger-strong: #ffa3a9;
    --c-danger-soft: #3a1519;
    --c-danger-fill: #f0565e;
    --c-info: #7aa2ff;
    --c-info-soft: #152242;
    --c-violet: #b3a0ff;
    --c-violet-soft: #231c45;
    --c-accent: var(--p-lime-400);
    --c-accent-soft: #26300d;
    --c-accent-ink: var(--p-navy-900);
    --c-mint: var(--p-mint-400);
    --c-mint-soft: #0d2e28;
    --c-scrim: rgb(0 0 0 / 0.62);
    --c-shadow-color: 220 60% 2%;
    --c-glow-primary: rgb(122 162 255 / 0.30);
    --c-glow-mint: rgb(46 230 188 / 0.20);
    --c-skeleton-base: #1a2333;
    --c-skeleton-shine: #232e42;
    --c-dot-grid: #18202d;
    --c-chart-1: #6f97ff;
    --c-chart-2: #a78bfa;
    --c-chart-3: #34c98b;
    --c-chart-4: #f7b84b;
    --c-chart-5: #ff6b72;
    --c-chart-pending: #4a5870;
    --c-chart-grid: #1f2938;
    --c-chart-track: #1f2938;
    --c-chart-heat-0: #161f2d;
  }
}

/* Inter Variable, self-hosted (SIL OFL 1.1) — no third-party font requests */
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}