/* BigChange tokens — generated from the design system tokens.json */
:root{
  --color-blue-50: #eef5ff;
  --color-blue-100: #dbe9ff;
  --color-blue-200: #b8d3ff;
  --color-blue-300: #85b4ff;
  --color-blue-400: #4a90ff;
  --color-blue-500: #006bff;
  --color-blue-600: #005ad9;
  --color-blue-700: #0049b0;
  --color-blue-800: #003a8a;
  --color-blue-900: #0b2c66;
  --color-blue-950: #081b40;
  --color-neutral-0: #ffffff;
  --color-neutral-25: #fafbfd;
  --color-neutral-50: #f3f6fa;
  --color-neutral-100: #e8edf4;
  --color-neutral-200: #d3dbe6;
  --color-neutral-300: #b4c0d0;
  --color-neutral-400: #8a98ad;
  --color-neutral-500: #65748b;
  --color-neutral-600: #4a586f;
  --color-neutral-700: #334058;
  --color-neutral-800: #1c2b44;
  --color-neutral-900: #0a2240;
  --color-neutral-950: #061529;
  --color-sky-50: #f0faff;
  --color-sky-100: #d8f3ff;
  --color-sky-200: #b3e6ff;
  --color-sky-300: #7dd3fc;
  --color-sky-400: #38bdf8;
  --color-sky-500: #0ea5e9;
  --color-green-50: #ecfdf3;
  --color-green-100: #d1fadf;
  --color-green-500: #12b76a;
  --color-green-600: #039855;
  --color-green-700: #027a48;
  --color-amber-50: #fffaeb;
  --color-amber-100: #fef0c7;
  --color-amber-500: #f79009;
  --color-amber-600: #dc6803;
  --color-amber-700: #b54708;
  --color-red-50: #fef3f2;
  --color-red-100: #fee4e2;
  --color-red-500: #f04438;
  --color-red-600: #d92d20;
  --color-red-700: #b42318;
  --bg-canvas: var(--color-neutral-0);
  --bg-surface: var(--color-neutral-25);
  --bg-subtle: var(--color-neutral-50);
  --bg-muted: var(--color-neutral-100);
  --bg-inverse: var(--color-neutral-900);
  --bg-brand: var(--color-blue-500);
  --bg-brand-hover: var(--color-blue-600);
  --bg-brand-pressed: var(--color-blue-700);
  --bg-brand-tint: var(--color-blue-50);
  --bg-brand-tint-strong: var(--color-blue-100);
  --bg-ice: var(--color-sky-100);
  --bg-disabled: var(--color-neutral-100);
  --bg-success: var(--color-green-50);
  --bg-warning: var(--color-amber-50);
  --bg-danger: var(--color-red-50);
  --text-primary: var(--color-neutral-900);
  --text-secondary: var(--color-neutral-600);
  --text-tertiary: var(--color-neutral-500);
  --text-disabled: var(--color-neutral-400);
  --text-inverse: var(--color-neutral-0);
  --text-on-brand: var(--color-neutral-0);
  --text-brand: var(--color-blue-500);
  --text-brand-hover: var(--color-blue-600);
  --text-brand-pressed: var(--color-blue-700);
  --text-success: var(--color-green-700);
  --text-warning: var(--color-amber-700);
  --text-danger: var(--color-red-700);
  --icon-primary: var(--color-neutral-900);
  --icon-secondary: var(--color-neutral-500);
  --icon-brand: var(--color-blue-500);
  --icon-on-brand: var(--color-neutral-0);
  --icon-disabled: var(--color-neutral-400);
  --border-default: var(--color-neutral-200);
  --border-strong: var(--color-neutral-300);
  --border-subtle: var(--color-neutral-100);
  --border-brand: var(--color-blue-500);
  --border-focus: var(--color-blue-500);
  --border-disabled: var(--color-neutral-100);
  --pixel-solid: var(--color-blue-500);
  --pixel-mid: var(--color-blue-300);
  --pixel-soft: var(--color-blue-100);
  --connector: var(--color-neutral-300);
  --hub: var(--color-neutral-300);
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;
  --space-128: 128px;
  --space-160: 160px;
  --radius-none: 0px;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;
  --radius-3xl: 24px;
  --radius-full: 9999px;
  --shadow-xs: 0 1px 2px rgba(10,34,64,0.06);
  --shadow-s: 0 1px 3px rgba(10,34,64,0.08), 0 1px 2px -1px rgba(10,34,64,0.04);
  --shadow-m: 0 4px 8px -2px rgba(10,34,64,0.08), 0 2px 4px -2px rgba(10,34,64,0.04);
  --shadow-l: 0 12px 24px -4px rgba(10,34,64,0.10), 0 4px 8px -4px rgba(10,34,64,0.04);
  --shadow-xl: 0 24px 48px -12px rgba(10,34,64,0.14);
  --shadow-float: 0 1px 2px rgba(10,34,64,0.06), 0 16px 32px -12px rgba(10,34,64,0.16);
  --shadow-brand-glow: 0 16px 40px -8px rgba(0,107,255,0.28);
  --shadow-btn-primary: inset 0 2px 5px rgba(255,255,255,0.45), 0 1px 2px rgba(10,34,64,0.10), 0 6px 16px -6px rgba(0,107,255,0.30);
  --shadow-btn-primary-pressed: inset 0 2px 4px rgba(10,34,64,0.22);
  --shadow-btn-secondary: 0 1px 2px rgba(10,34,64,0.06), 0 4px 10px -4px rgba(10,34,64,0.05);
  --shadow-btn-secondary-pressed: inset 0 2px 4px rgba(10,34,64,0.06);
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #006bff;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --pixel-cell: 20px;
  --pixel-gap: 0px;
  --connector-width: 1.5px;
  --connector-radius: 16px;
  --font-display: "Roboto Flex", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
[data-theme="dark"]{
  --bg-canvas: var(--color-neutral-950);
  --bg-surface: var(--color-neutral-900);
  --bg-subtle: var(--color-neutral-800);
  --bg-muted: var(--color-neutral-700);
  --bg-inverse: var(--color-neutral-0);
  --bg-brand: var(--color-blue-500);
  --bg-brand-hover: var(--color-blue-600);
  --bg-brand-pressed: var(--color-blue-700);
  --bg-brand-tint: var(--color-blue-950);
  --bg-brand-tint-strong: var(--color-blue-900);
  --bg-ice: var(--color-blue-950);
  --bg-disabled: var(--color-neutral-800);
  --bg-success: var(--color-green-700);
  --bg-warning: var(--color-amber-700);
  --bg-danger: var(--color-red-700);
  --text-primary: var(--color-neutral-0);
  --text-secondary: var(--color-neutral-300);
  --text-tertiary: var(--color-neutral-400);
  --text-disabled: var(--color-neutral-600);
  --text-inverse: var(--color-neutral-900);
  --text-on-brand: var(--color-neutral-0);
  --text-brand: var(--color-blue-300);
  --text-brand-hover: var(--color-blue-200);
  --text-brand-pressed: var(--color-blue-100);
  --text-success: var(--color-green-100);
  --text-warning: var(--color-amber-100);
  --text-danger: var(--color-red-100);
  --icon-primary: var(--color-neutral-0);
  --icon-secondary: var(--color-neutral-400);
  --icon-brand: var(--color-blue-300);
  --icon-on-brand: var(--color-neutral-0);
  --icon-disabled: var(--color-neutral-600);
  --border-default: var(--color-neutral-700);
  --border-strong: var(--color-neutral-600);
  --border-subtle: var(--color-neutral-800);
  --border-brand: var(--color-blue-400);
  --border-focus: var(--color-blue-300);
  --border-disabled: var(--color-neutral-800);
  --pixel-solid: var(--color-blue-500);
  --pixel-mid: var(--color-blue-400);
  --pixel-soft: var(--color-blue-800);
  --connector: var(--color-neutral-600);
  --hub: var(--color-neutral-600);
  --shadow-float: 0 1px 2px rgba(0,0,0,0.30), 0 16px 32px -12px rgba(0,0,0,0.45);
  --shadow-btn-secondary: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-focus: 0 0 0 2px #061529, 0 0 0 4px #85b4ff;
}
.display-xl{font-family:var(--font-display);font-size:72px;line-height:76px;font-weight:700; letter-spacing:-0.02em;}
.display-l{font-family:var(--font-display);font-size:60px;line-height:64px;font-weight:700; letter-spacing:-0.02em;}
.h1{font-family:var(--font-display);font-size:48px;line-height:56px;font-weight:700; letter-spacing:-0.015em;}
.h2{font-family:var(--font-display);font-size:40px;line-height:48px;font-weight:700; letter-spacing:-0.01em;}
.h3{font-family:var(--font-display);font-size:32px;line-height:40px;font-weight:600; letter-spacing:-0.005em;}
.h4{font-family:var(--font-display);font-size:24px;line-height:32px;font-weight:600;}
.h5{font-family:var(--font-display);font-size:20px;line-height:28px;font-weight:600;}
.h6{font-family:var(--font-display);font-size:18px;line-height:26px;font-weight:600;}
.body-xl{font-family:var(--font-body);font-size:20px;line-height:32px;font-weight:400;}
.body-l{font-family:var(--font-body);font-size:18px;line-height:28px;font-weight:400;}
.body-m{font-family:var(--font-body);font-size:16px;line-height:26px;font-weight:400;}
.body-m-medium{font-family:var(--font-body);font-size:16px;line-height:26px;font-weight:500;}
.body-s{font-family:var(--font-body);font-size:14px;line-height:22px;font-weight:400;}
.body-s-medium{font-family:var(--font-body);font-size:14px;line-height:22px;font-weight:500;}
.body-xs{font-family:var(--font-body);font-size:12px;line-height:18px;font-weight:400;}
.label-l{font-family:var(--font-body);font-size:16px;line-height:24px;font-weight:500;}
.label-m{font-family:var(--font-body);font-size:14px;line-height:20px;font-weight:500;}
.label-s{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:500;}
.overline{font-family:var(--font-body);font-size:12px;line-height:16px;font-weight:600; letter-spacing:0.08em; text-transform:uppercase;}