/* Generated from web/design/tokens.cjs by npm run build:css. Change the tokens there, not here. */
@font-face { font-family: 'Open Runde'; font-weight: 400; font-style: normal; font-display: swap; src: url(/fonts/OpenRunde-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Open Runde'; font-weight: 500; font-style: normal; font-display: swap; src: url(/fonts/OpenRunde-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Open Runde'; font-weight: 600; font-style: normal; font-display: swap; src: url(/fonts/OpenRunde-Semibold.woff2) format('woff2'); }
@font-face { font-family: 'Open Runde'; font-weight: 700; font-style: normal; font-display: swap; src: url(/fonts/OpenRunde-Bold.woff2) format('woff2'); }
:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  color-scheme: dark;
  --zinc-50: 250 250 250;
  --zinc-100: 244 244 245;
  --zinc-200: 228 228 231;
  --zinc-300: 212 212 216;
  --zinc-400: 161 161 170;
  --zinc-500: 113 113 122;
  --zinc-600: 82 82 91;
  --zinc-700: 63 63 70;
  --zinc-800: 40 44 52;
  --zinc-900: 27 30 37;
  --zinc-950: 17 19 24;
  --white: 255 255 255;
  --bg: #111318;
  --surface: #1c1f26;
  --line: #2b2f38;
  --text: #e8eaee;
  --text-2: #b4b8c1;
  --text-3: #959aa5;
  --accent: #7fb0ff;
  --accent-soft: rgb(127 176 255 / 0.12);
  --tint-base: #1a1d23;
  --tint-mix: 12%;
  --name-mix: white;
  --bubble-me: #e9e7e2;
  --bubble-me-text: #16181c;
  --code-bg: #0c0c0e;
  --link: #93c5fd;
  --strong: #fafafa;
  --muted: #a1a1aa;
  --marker: #71717a;
  --shadow: rgba(0, 0, 0, 0.7);
  --ink: #16161A;
  --paper: #F7F7F5;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 18px 40px rgba(0, 0, 0, 0.45);
  --card: #FFFFFF;
  --hair: #E6E6E3;
  --hair-2: #EFEFEC;
  --blue: #2453D6;
  --blue-deep: #1A3FA8;
  --blue-soft: #EEF2FD;
  --blue-line: #C9D6FA;
  --orange: #B4410B;
  --orange-soft: #FFF4EC;
  --orange-line: #F3D5C2;
  --green: #1F6F3A;
  --tick-seen: #A8DDFF;
  --on-color: #FFFFFF;
  --on-blue: #FFFFFF;
  --on-orange: #FFFFFF;
  --on-green: #FFFFFF;
  --on-danger: #FFFFFF;
  --green-soft: #DCF3E4;
  --stage: #0B0B0D;
  --on-stage: #FFFFFF;
  --stage-2: rgb(255 255 255 / 0.14);
  --stage-veil: rgb(0 0 0 / 0.55);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --text-small: calc(12.5px * var(--text-scale, 1));
  --text-label: calc(13px * var(--text-scale, 1));
  --text-body: calc(15.5px * var(--text-scale, 1));
  --text-input: calc(16px * var(--text-scale, 1));
  --text-title: calc(17px * var(--text-scale, 1));
  --text-heading: calc(28px * var(--text-scale, 1));
  --tap: 44px;
}
:root.light {
  color-scheme: light;
  --face-green: #D3EEE5;
  --face-yellow: #FBE9B7;
  --face-purple: #E6DAFC;
  --face-blue: #D6E9FB;
  --who-green: #0F7A5F;
  --who-yellow: #8A6100;
  --who-purple: #7A4CC2;
  --who-blue: #1F6FB2;
  --ink: #1C2430;
  --paper: #FBFAF8;
  --card: #FFFFFF;
  --hair: #E8E6E1;
  --hair-2: #F0EEEA;
  --blue: #1C2430;
  --blue-deep: #0E141C;
  --blue-soft: #FFF1C4;
  --blue-line: #F2D98A;
  --zinc-50: 10 10 12;
  --zinc-100: 22 22 26;
  --zinc-200: 40 40 46;
  --zinc-300: 58 58 64;
  --zinc-400: 94 94 102;
  --zinc-500: 120 120 128;
  --zinc-600: 138 138 146;
  --zinc-700: 196 196 192;
  --zinc-800: 236 236 232;
  --zinc-900: 255 255 255;
  --zinc-950: 247 247 245;
  --white: 22 22 26;
  --bg: #FBFAF8;
  --surface: #F4F2EE;
  --line: #E8E6E1;
  --text: #1C2430;
  --text-2: #4D5562;
  --text-3: #646B78;
  --accent: #1C2430;
  --accent-soft: rgb(246 198 75 / 0.22);
  --tint-base: #FFFFFF;
  --tint-mix: 11%;
  --name-mix: black;
  --bubble-me: #FFEFB8;
  --bubble-me-text: #1C2430;
  --tick-seen: #1F6FB2;
  --code-bg: #F4F2EE;
  --link: #2453D6;
  --strong: #0A0A0C;
  --muted: #5E5E66;
  --marker: #6E6E76;
  --shadow: rgba(28, 36, 48, 0.14);
  --shadow-1: none;
  --shadow-2: 0 12px 32px rgba(28, 36, 48, 0.14), 0 2px 6px rgba(28, 36, 48, 0.08);
  --feed-bg: #FBFAF8;
  --bubble-agent: #FFFFFF;
  --bubble-agent-line: #E8E6E1;
  --danger: #C4321B;
  --danger-soft: #FDEDEA;
  --danger-line: #F4C7BE;
  --sun: #F6C64B;
}
:root.dark {
  color-scheme: dark;
  --zinc-50: 250 250 249;
  --zinc-100: 237 237 239;
  --zinc-200: 220 220 224;
  --zinc-300: 196 196 202;
  --zinc-400: 166 166 174;
  --zinc-500: 124 124 133;
  --zinc-600: 96 96 104;
  --zinc-700: 62 62 68;
  --zinc-800: 42 42 48;
  --zinc-900: 27 27 31;
  --zinc-950: 17 17 19;
  --white: 255 255 255;
  --face-green: rgb(132 222 195 / 0.16);
  --face-yellow: rgb(246 198 75 / 0.16);
  --face-purple: rgb(181 138 246 / 0.18);
  --face-blue: rgb(108 183 243 / 0.16);
  --who-green: #84DEC3;
  --who-yellow: #F6C64B;
  --who-purple: #C9A6FA;
  --who-blue: #8CC4F5;
  --ink: #F6C64B;
  --paper: #14161A;
  --card: #1C1F24;
  --hair: #2B2F36;
  --hair-2: #24272D;
  --blue: #F6C64B;
  --blue-deep: #FFD978;
  --blue-soft: rgb(246 198 75 / 0.16);
  --blue-line: rgb(246 198 75 / 0.4);
  --orange: #F0915A;
  --orange-soft: rgb(240 145 90 / 0.10);
  --orange-line: rgb(240 145 90 / 0.35);
  --green: #6FD39A;
  --green-soft: rgb(111 211 154 / 0.12);
  --bg: #14161A;
  --feed-bg: #14161A;
  --surface: #191C20;
  --line: #2B2F36;
  --text: #F2F1EE;
  --text-2: #C4C7CC;
  --text-3: #9CA1A8;
  --accent: #F6C64B;
  --accent-soft: rgb(246 198 75 / 0.16);
  --link: #9DB7FF;
  --tint-base: #1C1F24;
  --name-mix: white;
  --bubble-me: #4A3B10;
  --bubble-me-text: #FFF4D6;
  --tick-seen: #8CC4F5;
  --bubble-agent: #1C1F24;
  --bubble-agent-line: #2B2F36;
  --code-bg: #101216;
  --shadow-1: none;
  --shadow-2: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.35);
  --strong: #FFFFFF;
  --muted: #A6A6AE;
  --marker: #8E8E97;
  --on-blue: #14161A;
  --on-orange: #111113;
  --on-green: #111113;
  --on-danger: #111113;
  --danger: #F2836B;
  --danger-soft: rgb(242 131 107 / 0.10);
  --danger-line: rgb(242 131 107 / 0.35);
  --sun: #F6C64B;
}