/* insonic color tokens. GENERATED by gen_vanilla.py from brand.json. */
:root {
  --in-accent: #86BDF2;
  --in-accent-deep: #256DA9;
  --in-accent-accessible: #256DA9;
  --in-dim: #86BDF2;
  --in-emphasis: #86BDF2;
  --in-action: #256DA9;
  --in-fault: #E9505F;
  --in-fault-deep: #C0293A;
  --in-void: #0C151B;
  --in-surface: #14222C;
  --in-surface-sunken: #14222C;
  --in-surface-raised: #20323F;
  --in-surface-hover: #2B4050;
  --in-line: #262626;
  --in-text: #FFFFFF;
  --in-text-muted: #9A9A9A;
  --in-light-surface: #F8F8F6;
  --in-light-panel: #FFFFFF;
  --in-light-text: #0A0A0A;
  --in-light-text-muted: #6B6B6B;
  --in-light-line: #E5E5E5;
  --in-accent-10: rgb(134 189 242 / 10%);
  --in-accent-20: rgb(134 189 242 / 20%);
  --in-emphasis-12: rgb(242 190 110 / 12%);
  --in-fault-12: rgb(243 148 148 / 12%);
  --in-bg: var(--in-void);
  --in-panel: var(--in-surface);
  --in-panel-raised: var(--in-surface-raised);
  --in-hover: var(--in-surface-hover);
  --in-border: var(--in-line);
  --in-fg: var(--in-text);
  --in-fg-muted: var(--in-text-muted);
  --in-link: var(--in-accent);
  --in-focus: var(--in-accent);
  --in-warning: #F2BE6E;
  --in-danger: #F39494;
  --in-success: #77C9A8;
  --in-information: #86BDF2;
  --in-primary-foreground: #000000;
}

.in-light {
  --in-bg: var(--in-light-surface);
  --in-panel: var(--in-light-panel);
  --in-panel-raised: var(--in-light-panel);
  --in-hover: #F0EFED;
  --in-border: var(--in-light-line);
  --in-fg: var(--in-light-text);
  --in-fg-muted: var(--in-light-text-muted);
  --in-accent: var(--in-accent-accessible);
  --in-accent-deep: var(--in-accent-accessible);
  --in-link: var(--in-accent-accessible);
  --in-focus: var(--in-accent-accessible);
  --in-warning: #805000;
  --in-danger: #A03035;
  --in-success: #17654B;
  --in-information: #256DA9;
  --in-primary-foreground: #FFFFFF;
}

@media (prefers-color-scheme: light) { :root {
  --in-bg: var(--in-light-surface);
  --in-panel: var(--in-light-panel);
  --in-panel-raised: var(--in-light-panel);
  --in-hover: #F0EFED;
  --in-border: var(--in-light-line);
  --in-fg: var(--in-light-text);
  --in-fg-muted: var(--in-light-text-muted);
  --in-accent: var(--in-accent-accessible);
  --in-accent-deep: var(--in-accent-accessible);
  --in-link: var(--in-accent-accessible);
  --in-focus: var(--in-accent-accessible);
  --in-warning: #805000;
  --in-danger: #A03035;
  --in-success: #17654B;
  --in-information: #256DA9;
  --in-primary-foreground: #FFFFFF;
} }
:root[data-theme="light"] {
  --in-bg: var(--in-light-surface);
  --in-panel: var(--in-light-panel);
  --in-panel-raised: var(--in-light-panel);
  --in-hover: #F0EFED;
  --in-border: var(--in-light-line);
  --in-fg: var(--in-light-text);
  --in-fg-muted: var(--in-light-text-muted);
  --in-accent: var(--in-accent-accessible);
  --in-accent-deep: var(--in-accent-accessible);
  --in-link: var(--in-accent-accessible);
  --in-focus: var(--in-accent-accessible);
  --in-warning: #805000;
  --in-danger: #A03035;
  --in-success: #17654B;
  --in-information: #256DA9;
  --in-primary-foreground: #FFFFFF;
}
:root[data-theme="dark"] {
  --in-accent: #86BDF2;
  --in-accent-deep: #256DA9;
  --in-accent-accessible: #256DA9;
  --in-dim: #86BDF2;
  --in-emphasis: #86BDF2;
  --in-action: #256DA9;
  --in-fault: #E9505F;
  --in-fault-deep: #C0293A;
  --in-void: #0C151B;
  --in-surface: #14222C;
  --in-surface-sunken: #14222C;
  --in-surface-raised: #20323F;
  --in-surface-hover: #2B4050;
  --in-line: #262626;
  --in-text: #FFFFFF;
  --in-text-muted: #9A9A9A;
  --in-light-surface: #F8F8F6;
  --in-light-panel: #FFFFFF;
  --in-light-text: #0A0A0A;
  --in-light-text-muted: #6B6B6B;
  --in-light-line: #E5E5E5;
  --in-accent-10: rgb(134 189 242 / 10%);
  --in-accent-20: rgb(134 189 242 / 20%);
  --in-emphasis-12: rgb(242 190 110 / 12%);
  --in-fault-12: rgb(243 148 148 / 12%);
  --in-bg: var(--in-void);
  --in-panel: var(--in-surface);
  --in-panel-raised: var(--in-surface-raised);
  --in-hover: var(--in-surface-hover);
  --in-border: var(--in-line);
  --in-fg: var(--in-text);
  --in-fg-muted: var(--in-text-muted);
  --in-link: var(--in-accent);
  --in-focus: var(--in-accent);
  --in-warning: #F2BE6E;
  --in-danger: #F39494;
  --in-success: #77C9A8;
  --in-information: #86BDF2;
  --in-primary-foreground: #000000;
}
/* GENERATED by BrandBuilder gen_web_react.py. Framework-neutral semantic interface tokens. */
:root {
  --bb-action-destructive: #F39494;
  --bb-action-emphasis: #F2BE6E;
  --bb-action-primary: #256DA9;
  --bb-border-default: 1px;
  --bb-border-strong: 2px;
  --bb-density-compact: compact;
  --bb-density-default: comfortable;
  --bb-focus-offset: 2px;
  --bb-focus-ring: #86BDF2;
  --bb-focus-width: 2px;
  --bb-interaction-pointer-hit-slop: 8px;
  --bb-interaction-target-minimum: 44px;
  --bb-layout-content-max: 1200px;
  --bb-layout-gutter-compact: 24px;
  --bb-layout-gutter-expanded: 48px;
  --bb-layout-narrow-max: 720px;
  --bb-motion-fast: 120ms;
  --bb-motion-reduced: 0ms;
  --bb-motion-standard: 180ms;
  --bb-spacing-component: 24px;
  --bb-spacing-control-block: 12px;
  --bb-spacing-control-inline: 16px;
  --bb-spacing-section: 64px;
  --bb-state-disabled-opacity: 0.48;
  --bb-state-hover-opacity: 0.92;
  --bb-state-selected-border-width: 2px;
  --bb-surface-background: #0C151B;
  --bb-surface-card: #14222C;
  --bb-surface-overlay: #14222C;
  --bb-text-muted: #86BDF2;
  --bb-text-on-accent: #000000;
  --bb-text-on-action: #FFFFFF;
  --bb-text-on-destructive: #000000;
  --bb-text-primary: #FFFFFF;
  --bb-typography-body-family: "Geist", system-ui, sans-serif;
  --bb-typography-display-family: "Space Grotesk", system-ui, sans-serif;
  --bb-typography-label-weight: 500;
  --bb-typography-mono-family: "Geist Mono", system-ui, sans-serif;
  --bb-cue-error: #F39494;
  --bb-cue-information: #86BDF2;
  --bb-cue-success: #77C9A8;
  --bb-cue-warning: #F2BE6E;
}

.bb-light {
  --bb-action-destructive: #A03035;
  --bb-action-emphasis: #805000;
  --bb-action-primary: #256DA9;
  --bb-border-default: 1px;
  --bb-border-strong: 2px;
  --bb-density-compact: compact;
  --bb-density-default: comfortable;
  --bb-focus-offset: 2px;
  --bb-focus-ring: #256DA9;
  --bb-focus-width: 2px;
  --bb-interaction-pointer-hit-slop: 8px;
  --bb-interaction-target-minimum: 44px;
  --bb-layout-content-max: 1200px;
  --bb-layout-gutter-compact: 24px;
  --bb-layout-gutter-expanded: 48px;
  --bb-layout-narrow-max: 720px;
  --bb-motion-fast: 120ms;
  --bb-motion-reduced: 0ms;
  --bb-motion-standard: 180ms;
  --bb-spacing-component: 24px;
  --bb-spacing-control-block: 12px;
  --bb-spacing-control-inline: 16px;
  --bb-spacing-section: 64px;
  --bb-state-disabled-opacity: 0.48;
  --bb-state-hover-opacity: 0.92;
  --bb-state-selected-border-width: 2px;
  --bb-surface-background: #F4F7F7;
  --bb-surface-card: #FFFFFF;
  --bb-surface-overlay: #FFFFFF;
  --bb-text-muted: #256DA9;
  --bb-text-on-accent: #FFFFFF;
  --bb-text-on-action: #FFFFFF;
  --bb-text-on-destructive: #FFFFFF;
  --bb-text-primary: #000000;
  --bb-typography-body-family: "Geist", system-ui, sans-serif;
  --bb-typography-display-family: "Space Grotesk", system-ui, sans-serif;
  --bb-typography-label-weight: 500;
  --bb-typography-mono-family: "Geist Mono", system-ui, sans-serif;
  --bb-cue-error: #A03035;
  --bb-cue-information: #256DA9;
  --bb-cue-success: #17654B;
  --bb-cue-warning: #805000;
}

@media (prefers-color-scheme: light) { :root {
  --bb-action-destructive: #A03035;
  --bb-action-emphasis: #805000;
  --bb-action-primary: #256DA9;
  --bb-border-default: 1px;
  --bb-border-strong: 2px;
  --bb-density-compact: compact;
  --bb-density-default: comfortable;
  --bb-focus-offset: 2px;
  --bb-focus-ring: #256DA9;
  --bb-focus-width: 2px;
  --bb-interaction-pointer-hit-slop: 8px;
  --bb-interaction-target-minimum: 44px;
  --bb-layout-content-max: 1200px;
  --bb-layout-gutter-compact: 24px;
  --bb-layout-gutter-expanded: 48px;
  --bb-layout-narrow-max: 720px;
  --bb-motion-fast: 120ms;
  --bb-motion-reduced: 0ms;
  --bb-motion-standard: 180ms;
  --bb-spacing-component: 24px;
  --bb-spacing-control-block: 12px;
  --bb-spacing-control-inline: 16px;
  --bb-spacing-section: 64px;
  --bb-state-disabled-opacity: 0.48;
  --bb-state-hover-opacity: 0.92;
  --bb-state-selected-border-width: 2px;
  --bb-surface-background: #F4F7F7;
  --bb-surface-card: #FFFFFF;
  --bb-surface-overlay: #FFFFFF;
  --bb-text-muted: #256DA9;
  --bb-text-on-accent: #FFFFFF;
  --bb-text-on-action: #FFFFFF;
  --bb-text-on-destructive: #FFFFFF;
  --bb-text-primary: #000000;
  --bb-typography-body-family: "Geist", system-ui, sans-serif;
  --bb-typography-display-family: "Space Grotesk", system-ui, sans-serif;
  --bb-typography-label-weight: 500;
  --bb-typography-mono-family: "Geist Mono", system-ui, sans-serif;
  --bb-cue-error: #A03035;
  --bb-cue-information: #256DA9;
  --bb-cue-success: #17654B;
  --bb-cue-warning: #805000;
} }
:root[data-theme="light"] {
  --bb-action-destructive: #A03035;
  --bb-action-emphasis: #805000;
  --bb-action-primary: #256DA9;
  --bb-border-default: 1px;
  --bb-border-strong: 2px;
  --bb-density-compact: compact;
  --bb-density-default: comfortable;
  --bb-focus-offset: 2px;
  --bb-focus-ring: #256DA9;
  --bb-focus-width: 2px;
  --bb-interaction-pointer-hit-slop: 8px;
  --bb-interaction-target-minimum: 44px;
  --bb-layout-content-max: 1200px;
  --bb-layout-gutter-compact: 24px;
  --bb-layout-gutter-expanded: 48px;
  --bb-layout-narrow-max: 720px;
  --bb-motion-fast: 120ms;
  --bb-motion-reduced: 0ms;
  --bb-motion-standard: 180ms;
  --bb-spacing-component: 24px;
  --bb-spacing-control-block: 12px;
  --bb-spacing-control-inline: 16px;
  --bb-spacing-section: 64px;
  --bb-state-disabled-opacity: 0.48;
  --bb-state-hover-opacity: 0.92;
  --bb-state-selected-border-width: 2px;
  --bb-surface-background: #F4F7F7;
  --bb-surface-card: #FFFFFF;
  --bb-surface-overlay: #FFFFFF;
  --bb-text-muted: #256DA9;
  --bb-text-on-accent: #FFFFFF;
  --bb-text-on-action: #FFFFFF;
  --bb-text-on-destructive: #FFFFFF;
  --bb-text-primary: #000000;
  --bb-typography-body-family: "Geist", system-ui, sans-serif;
  --bb-typography-display-family: "Space Grotesk", system-ui, sans-serif;
  --bb-typography-label-weight: 500;
  --bb-typography-mono-family: "Geist Mono", system-ui, sans-serif;
  --bb-cue-error: #A03035;
  --bb-cue-information: #256DA9;
  --bb-cue-success: #17654B;
  --bb-cue-warning: #805000;
}
:root[data-theme="dark"] {
  --bb-action-destructive: #F39494;
  --bb-action-emphasis: #F2BE6E;
  --bb-action-primary: #256DA9;
  --bb-border-default: 1px;
  --bb-border-strong: 2px;
  --bb-density-compact: compact;
  --bb-density-default: comfortable;
  --bb-focus-offset: 2px;
  --bb-focus-ring: #86BDF2;
  --bb-focus-width: 2px;
  --bb-interaction-pointer-hit-slop: 8px;
  --bb-interaction-target-minimum: 44px;
  --bb-layout-content-max: 1200px;
  --bb-layout-gutter-compact: 24px;
  --bb-layout-gutter-expanded: 48px;
  --bb-layout-narrow-max: 720px;
  --bb-motion-fast: 120ms;
  --bb-motion-reduced: 0ms;
  --bb-motion-standard: 180ms;
  --bb-spacing-component: 24px;
  --bb-spacing-control-block: 12px;
  --bb-spacing-control-inline: 16px;
  --bb-spacing-section: 64px;
  --bb-state-disabled-opacity: 0.48;
  --bb-state-hover-opacity: 0.92;
  --bb-state-selected-border-width: 2px;
  --bb-surface-background: #0C151B;
  --bb-surface-card: #14222C;
  --bb-surface-overlay: #14222C;
  --bb-text-muted: #86BDF2;
  --bb-text-on-accent: #000000;
  --bb-text-on-action: #FFFFFF;
  --bb-text-on-destructive: #000000;
  --bb-text-primary: #FFFFFF;
  --bb-typography-body-family: "Geist", system-ui, sans-serif;
  --bb-typography-display-family: "Space Grotesk", system-ui, sans-serif;
  --bb-typography-label-weight: 500;
  --bb-typography-mono-family: "Geist Mono", system-ui, sans-serif;
  --bb-cue-error: #F39494;
  --bb-cue-information: #86BDF2;
  --bb-cue-success: #77C9A8;
  --bb-cue-warning: #F2BE6E;
}
:root {
  --in-space-1: 0.25rem;
  --in-space-2: 0.5rem;
  --in-space-3: 0.75rem;
  --in-space-4: 1rem;
  --in-space-5: 1.5rem;
  --in-space-6: 2rem;
  --in-space-7: 3rem;
  --in-space-8: 4rem;
  --in-space-9: 6rem;
  --in-space-10: 7.5rem;
  --in-radius-sm: 6px;
  --in-radius-md: 8px;
  --in-radius-xl: 12px;
  --in-radius-2xl: 16px;
  --in-radius-pill: 9999px;
  --in-stroke-hairline: 1px;
  --in-stroke-icon: 1.5px;
  --in-stroke-focus: 2px;
  --in-motion-fast: 120ms;
  --in-motion-normal: 180ms;
  --in-motion-slow: 240ms;
  --in-ease: cubic-bezier(.2,.6,.2,1);
  --in-content-max: 1200px;
  --in-content-narrow: 720px;
  --in-clearspace-ratio: 0.1000;
}

:root {
  --in-font-display: "Space Grotesk", system-ui, sans-serif;
  --in-font-body: "Geist", system-ui, sans-serif;
  --in-font-mono: "Geist Mono", ui-monospace, monospace;
  --in-weight-regular: 400;
  --in-weight-medium: 500;
  --in-weight-bold: 700;
  --in-display-xl: 4.5rem;
  --in-display-lg: 3.5rem;
  --in-display-md: 2.5rem;
  --in-display-sm: 1.75rem;
  --in-display-xs: 1.25rem;
  --in-body-lg: 1.15rem;
  --in-body-md: 1rem;
  --in-body-sm: 0.875rem;
  --in-body-xs: 0.75rem;
  --in-tracking-display: -0.025em;
  --in-tracking-eyebrow: 0.12em;
  --in-tracking-mono: 0.08em;
  --in-leading-display: 1.1;
  --in-leading-body: 1.7;
  --in-leading-code: 1.6;
}