/* GENERATED by tools/build_tokens.py from airmouse/design/design-system/tokens.json. Do not edit. */
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Variable.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("../fonts/Lato-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/JetBrainsMono-Variable.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; }

:root {
  --font-display: "Manrope", "Lato", system-ui, -apple-system, sans-serif;
  --font-text: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --screen-margin: 20px;
  --section-gap: 32px;
  --control-gap: 12px;
  --button-gap: 12px;
  --touchpad-inset: 16px;
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;
  --touch-min: 48px;
  --touch-key: 56px;
  --touch-primary: 72px;
  --touch-rocker: 136px;
  --dpad-size: 248px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 28px;
  --icon-hero: 48px;
  --border-hairline: 1px;
  --border-control: 1.5px;
  --border-focus: 2px;
  --opacity-disabled: 0.38;
  --opacity-pressed: 0.12;
  --opacity-hint: 0.6;
  --z-base: 0;
  --z-sticky: 10;
  --z-tabbar: 20;
  --z-sheet: 40;
  --z-dialog: 50;
  --z-toast: 60;
  --z-hud: 70;
  --duration-instant: 80ms;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --duration-slow: 320ms;
  --duration-pulse: 1400ms;
  --duration-hud: 1200ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-out: cubic-bezier(0, 0, 0, 1);
  --ease-in: cubic-bezier(0.3, 0, 1, 1);
  --ease-press: cubic-bezier(0.3, 0, 0.2, 1.4);
  --bp-compact: 0px;
  --bp-regular: 375px;
  --bp-large: 428px;
  --bp-tablet: 600px;
  --type-display: 700 34px/40px var(--font-display);
  --type-display-tracking: -0.025em;
  --type-title-large: 700 28px/36px var(--font-display);
  --type-title-large-tracking: -0.02em;
  --type-title: 700 20px/28px var(--font-display);
  --type-title-tracking: -0.01em;
  --type-subheading: 700 17px/24px var(--font-display);
  --type-subheading-tracking: -0.01em;
  --type-device-name: 700 17px/24px var(--font-display);
  --type-device-name-tracking: -0.01em;
  --type-key-caption: 700 11px/16px var(--font-display);
  --type-key-caption-tracking: 0.1em;
  --type-body-large: 400 17px/26px var(--font-text);
  --type-body-large-tracking: 0;
  --type-body: 400 16px/24px var(--font-text);
  --type-body-tracking: 0;
  --type-body-small: 400 14px/20px var(--font-text);
  --type-body-small-tracking: 0.005em;
  --type-caption: 400 12px/16px var(--font-text);
  --type-caption-tracking: 0.01em;
  --type-label: 700 13px/16px var(--font-text);
  --type-label-tracking: 0.01em;
  --type-button: 700 16px/20px var(--font-text);
  --type-button-tracking: 0.005em;
  --type-button-small: 700 14px/18px var(--font-text);
  --type-button-small-tracking: 0.01em;
  --type-navigation: 700 11px/14px var(--font-text);
  --type-navigation-tracking: 0.02em;
  --type-status: 700 13px/16px var(--font-text);
  --type-status-tracking: 0.005em;
  --type-numeric-display: 600 56px/64px var(--font-display);
  --type-numeric-display-tracking: -0.03em;
  --type-numeric: 600 15px/20px var(--font-display);
  --type-numeric-tracking: 0;
  --type-keypad: 600 24px/32px var(--font-display);
  --type-keypad-tracking: -0.01em;
  --type-pin: 600 32px/40px var(--font-display);
  --type-pin-tracking: 0.2em;
  --type-code: 500 12px/16px var(--font-mono);
  --type-code-tracking: 0;
}

/* Dark is primary. Light is a sibling, not an inversion. */
:root, :root[data-theme="dark"] {
  --bg-base: #030405;
  --bg-elevated: #0b0d0f;
  --surface: #121518;
  --surface-elevated: #1a1e22;
  --surface-pressed: #252a30;
  --key: #1b1f24;
  --key-pressed: #2c3238;
  --touchpad: #0c0f11;
  --touchpad-dot: #242a30;
  --control-thumb: #e9edf1;
  --scrim: rgba(0,0,0,0.64);
  --border: #262b31;
  --border-strong: #6b7580;
  --divider: #1c2024;
  --text-primary: #e9edf1;
  --text-secondary: #a7b0ba;
  --text-muted: #838d98;
  --text-disabled: #4a525b;
  --brand-primary: #c6f24e;
  --brand-primary-pressed: #addb33;
  --brand-edge: #c6f24e;
  --on-brand: #0a0c0d;
  --brand-ink: #c6f24e;
  --brand-secondary: #72d8f4;
  --brand-secondary-soft: #0d2a33;
  --accent: #1e2a0b;
  --focus: #72d8f4;
  --success: #c6f24e;
  --warning: #ffb547;
  --warning-soft: #2e2108;
  --error: #ff6b5e;
  --error-soft: #35120f;
  --on-error: #1a0503;
  --info: #72d8f4;
  --info-soft: #0d2a33;
  --status-connected: #c6f24e;
  --status-connecting: #ffb547;
  --status-pairing: #72d8f4;
  --status-weak: #ffb547;
  --status-disconnected: #8b95a0;
  --status-unavailable: #5b646e;
  --status-unsupported: #838d98;
  --status-error: #ff6b5e;
  --wifi: #72d8f4;
  --wifi-soft: #0d2a33;
  --bluetooth: #93a2ff;
  --tvkey-red: #f0565b;
  --tvkey-green: #3fcf74;
  --tvkey-yellow: #f2c318;
  --tvkey-blue: #5b93ff;
  --bluetooth-soft: #171c3a;
  --shadow-key: inset 0 1px 0 rgba(255,255,255,0.06), 0 1px 0 rgba(0,0,0,0.8);
  --shadow-key-pressed: inset 0 1px 2px rgba(0,0,0,0.5);
  --shadow-ok: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(10,12,13,0.12);
  --shadow-float: 0 8px 24px rgba(0,0,0,0.5);
  --shadow-sheet: 0 -1px 0 #262b31;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
  --bg-base: #eef0f2;
  --bg-elevated: #f6f7f8;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-pressed: #e4e8ec;
  --key: #ffffff;
  --key-pressed: #dde2e7;
  --touchpad: #f7f8f9;
  --touchpad-dot: #d3d8dd;
  --control-thumb: #ffffff;
  --scrim: rgba(13,16,19,0.40);
  --border: #dde1e5;
  --border-strong: #7a8490;
  --divider: #e6e9ec;
  --text-primary: #0d1013;
  --text-secondary: #48515b;
  --text-muted: #5d6671;
  --text-disabled: #a9b0b8;
  --brand-primary: #bdeb3a;
  --brand-primary-pressed: #a6d322;
  --brand-edge: #6f9410;
  --on-brand: #0a0c0d;
  --brand-ink: #3d6800;
  --brand-secondary: #0a6f8a;
  --brand-secondary-soft: #dff4fa;
  --accent: #edf7d2;
  --focus: #0a6f8a;
  --success: #3d6800;
  --warning: #8f5400;
  --warning-soft: #fdf0d9;
  --error: #c0261b;
  --error-soft: #fde6e4;
  --on-error: #ffffff;
  --info: #0a6f8a;
  --info-soft: #dff4fa;
  --status-connected: #5d9a00;
  --status-connecting: #c27a00;
  --status-pairing: #0a6f8a;
  --status-weak: #c27a00;
  --status-disconnected: #6b7581;
  --status-unavailable: #9aa3ac;
  --status-unsupported: #5d6671;
  --status-error: #c0261b;
  --wifi: #0a6f8a;
  --wifi-soft: #dff4fa;
  --bluetooth: #3446c9;
  --tvkey-red: #d93036;
  --tvkey-green: #1f9e4e;
  --tvkey-yellow: #c79a00;
  --tvkey-blue: #2f68e0;
  --bluetooth-soft: #e6e9fd;
  --shadow-key: inset 0 -1px 0 rgba(13,16,19,0.06), 0 1px 2px rgba(13,16,19,0.08);
  --shadow-key-pressed: inset 0 1px 2px rgba(13,16,19,0.12);
  --shadow-ok: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(10,12,13,0.10);
  --shadow-float: 0 8px 24px rgba(13,16,19,0.12);
  --shadow-sheet: 0 -8px 32px rgba(13,16,19,0.10);
  color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg-base: #eef0f2;
  --bg-elevated: #f6f7f8;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-pressed: #e4e8ec;
  --key: #ffffff;
  --key-pressed: #dde2e7;
  --touchpad: #f7f8f9;
  --touchpad-dot: #d3d8dd;
  --control-thumb: #ffffff;
  --scrim: rgba(13,16,19,0.40);
  --border: #dde1e5;
  --border-strong: #7a8490;
  --divider: #e6e9ec;
  --text-primary: #0d1013;
  --text-secondary: #48515b;
  --text-muted: #5d6671;
  --text-disabled: #a9b0b8;
  --brand-primary: #bdeb3a;
  --brand-primary-pressed: #a6d322;
  --brand-edge: #6f9410;
  --on-brand: #0a0c0d;
  --brand-ink: #3d6800;
  --brand-secondary: #0a6f8a;
  --brand-secondary-soft: #dff4fa;
  --accent: #edf7d2;
  --focus: #0a6f8a;
  --success: #3d6800;
  --warning: #8f5400;
  --warning-soft: #fdf0d9;
  --error: #c0261b;
  --error-soft: #fde6e4;
  --on-error: #ffffff;
  --info: #0a6f8a;
  --info-soft: #dff4fa;
  --status-connected: #5d9a00;
  --status-connecting: #c27a00;
  --status-pairing: #0a6f8a;
  --status-weak: #c27a00;
  --status-disconnected: #6b7581;
  --status-unavailable: #9aa3ac;
  --status-unsupported: #5d6671;
  --status-error: #c0261b;
  --wifi: #0a6f8a;
  --wifi-soft: #dff4fa;
  --bluetooth: #3446c9;
  --tvkey-red: #d93036;
  --tvkey-green: #1f9e4e;
  --tvkey-yellow: #c79a00;
  --tvkey-blue: #2f68e0;
  --bluetooth-soft: #e6e9fd;
  --shadow-key: inset 0 -1px 0 rgba(13,16,19,0.06), 0 1px 2px rgba(13,16,19,0.08);
  --shadow-key-pressed: inset 0 1px 2px rgba(13,16,19,0.12);
  --shadow-ok: inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -2px 0 rgba(10,12,13,0.10);
  --shadow-float: 0 8px 24px rgba(13,16,19,0.12);
  --shadow-sheet: 0 -8px 32px rgba(13,16,19,0.10);
  color-scheme: light;
}