/* GENERATED from design/tokens.json by design/build.mjs. Do not edit. */
:root {
  --bg: #f2f4f7;
  --surface: #ffffff;
  --rail: #ffffff;
  --fg: #1c2028;
  --muted: #646b7a;
  --muted-on-tint: #505663;
  --line: #e1e5eb;
  --hover: #1c20280d;
  --accent: #ef5a3c;
  --on-accent: #ffffff;
  --input: #f2f4f7;
  --danger: #d92d20;
  --ok: #1e9e5a;
  --on-device: #ffffff;
  --device-red: #e4572e;
  --device-blue: #2e86de;
  --device-purple: #8e44ad;
  --device-green: #1e9e5a;
  --device-amber: #c27803;
  --device-teal: #0e9aa7;
  --device-pink: #d63c8f;
  --device-indigo: #4b5bd6;
  --device-olive: #7a8f12;
  --device-slate: #5b6b7f;
  --device-tint: 16%;
  --device-tint-own: 32%;
  --font-sans: "Outfit", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --type-caption: 500 11px/1.3 var(--font-sans);
  --type-small: 400 12.5px/1.35 var(--font-sans);
  --type-body: 400 14px/1.38 var(--font-sans);
  --type-body-large: 400 15px/1.4 var(--font-sans);
  --type-label: 600 14px/1.3 var(--font-sans);
  --type-title: 600 17px/1.2 var(--font-sans);
  --type-headline: 600 24px/1.15 var(--font-sans);
  --radius-s: 8px;
  --radius-m: 12px;
  --radius-avatar: 15px;
  --radius-bubble: 20px;
  --radius-bubble-tail: 6px;
  --radius-pill: 999px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-xl: 24px;
  --space-xxl: 32px;
  --icon-stroke: 2;
  --icon-size: 20px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #121418;
    --surface: #1a1d23;
    --rail: #16191e;
    --fg: #eceef2;
    --muted: #9ba1ad;
    --muted-on-tint: #b6bbc5;
    --line: #2a2e36;
    --hover: #ffffff0d;
    --accent: #ff7a5e;
    --on-accent: #1a0d09;
    --input: #22262d;
    --danger: #ff6b5e;
    --ok: #45c27a;
    --on-device: #0f1115;
    --device-red: #ff7a55;
    --device-blue: #5aa5f0;
    --device-purple: #b57ad1;
    --device-green: #3ccf7f;
    --device-amber: #f5b041;
    --device-teal: #34c3cf;
    --device-pink: #f06aae;
    --device-indigo: #7c89f0;
    --device-olive: #a6bd34;
    --device-slate: #8a99ad;
    --device-tint: 18%;
    --device-tint-own: 28%;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #121418;
  --surface: #1a1d23;
  --rail: #16191e;
  --fg: #eceef2;
  --muted: #9ba1ad;
  --muted-on-tint: #b6bbc5;
  --line: #2a2e36;
  --hover: #ffffff0d;
  --accent: #ff7a5e;
  --on-accent: #1a0d09;
  --input: #22262d;
  --danger: #ff6b5e;
  --ok: #45c27a;
  --on-device: #0f1115;
  --device-red: #ff7a55;
  --device-blue: #5aa5f0;
  --device-purple: #b57ad1;
  --device-green: #3ccf7f;
  --device-amber: #f5b041;
  --device-teal: #34c3cf;
  --device-pink: #f06aae;
  --device-indigo: #7c89f0;
  --device-olive: #a6bd34;
  --device-slate: #8a99ad;
  --device-tint: 18%;
  --device-tint-own: 28%;
  color-scheme: dark;
}