/* Generated by scripts/tokens.ts from cx remote/design/tokens.json. Do not edit. */
:root {
  color-scheme: light dark;
  --color-bg: #FCFAF7;
  --color-surface: #F5F2EE;
  --color-fill: #ECE7E1;
  --color-raised: #FFFFFF;
  --color-pill: #FFFFFF;
  --color-thumb: #FFFFFF;
  --color-sheet: #FFFFFF;
  --color-bubble: #F0ECE7;
  --color-code-bg: #F7F4F0;
  --color-inline-code-bg: #F2EEE9;
  --color-scrim: #00000040;
  --color-skeleton: #EFECE9;
  --color-skeleton-shine: #F8F6F4;
  --color-inverse: #272320;
  --color-on-inverse: #F3F1EF;
  --color-inverse-accent: #DDB896;
  --color-hairline: #E5E0DC;
  --color-hairline-strong: #D5D0CA;
  --color-control-border: #8B857F;
  --color-focus: #885738;
  --color-text: #211D1A;
  --color-text-secondary: #4F4A45;
  --color-text-tertiary: #6E6862;
  --color-text-disabled: #A9A49E;
  --color-text-on-accent: #FFFFFF;
  --color-primary: #211D1A;
  --color-primary-hover: #2E2926;
  --color-primary-pressed: #3A3531;
  --color-on-primary: #FCFAF7;
  --color-link: #3E629D;
  --color-accent: #885738;
  --color-accent-pressed: #6F452B;
  --color-accent-soft: #F4EAE1;
  --color-attention: #885738;
  --color-attention-soft: #F4EAE1;
  --color-activity: #3E629D;
  --color-activity-soft: #E7EDF6;
  --color-success: #356E4C;
  --color-success-soft: #E5F1E8;
  --color-warning: #815B1B;
  --color-warning-soft: #F7EEDB;
  --color-danger: #A74848;
  --color-danger-pressed: #8C3A3A;
  --color-danger-soft: #F9E7E5;
  --color-danger-fill: #A74848;
  --color-on-danger: #FFFFFF;
  --color-diff-add-bg: #E6F4E8;
  --color-diff-del-bg: #FBEAEA;
  --color-diff-add-word: #BFE5C7;
  --color-diff-del-word: #F5C4C2;
  --color-diff-add-text: #356E4C;
  --color-diff-del-text: #A74848;
  --color-syn-keyword: #8A4D6F;
  --color-syn-string: #39705A;
  --color-syn-number: #8B5530;
  --color-syn-function: #3E629D;
  --color-syn-type: #315F71;
  --color-syn-property: #885738;
  --color-syn-comment: #6A655F;
  --color-syn-meta: #6B5A92;
  --color-match: #F6E4B0;
  --color-selection: #BED9F1;
  --color-chart-codex: #1B78A8;
  --color-chart-claude: #C8683E;
  --color-chart-grid: #ECE7E1;
  --color-chart-heat-1: #DDD2C6;
  --color-chart-heat-2: #BCAC9C;
  --color-chart-heat-3: #8B7B6B;
  --color-chart-heat-4: #4F453C;
  --color-chart-series-1: #2F6FB0;
  --color-chart-series-2: #C8683E;
  --color-chart-series-3: #0F917A;
  --color-chart-series-4: #B7892A;
  --color-chart-series-5: #9A4E86;
  --color-chart-series-6: #5E8C3A;
  --color-chart-series-7: #6B5BB5;
  --color-chart-series-8: #C4687F;
  --elevation-flat: none;
  --elevation-card: 0 0 0 1px var(--color-hairline-strong), 0 1px 2px #1A140F0A;
  --elevation-thumb: 0 1px 3px #1A140F1F, 0 0 0 0.5px #1A140F0F;
  --elevation-edge: calc(-1 * var(--layout-hairline)) 0 0 var(--color-hairline), -8px 0 24px #1A140F0F;
  --elevation-float: 0 0 0 var(--layout-hairline) var(--color-hairline), 0 2px 6px #1A140F0F, 0 8px 24px #1A140F14;
  --elevation-overlay: 0 0 0 var(--layout-hairline) var(--color-hairline), 0 12px 40px #1A140F24;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, 'Roboto Mono', 'Droid Sans Mono', monospace;
  --font-serif: Charter, 'Iowan Old Style', 'Source Serif 4', 'Source Serif Pro', 'Noto Serif CJK SC', 'Songti SC', Georgia, serif;
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --radius-inline: 6px;
  --radius-button-sm: 8px;
  --radius-in-card: 8px;
  --radius-segment-thumb: 8px;
  --radius-control-inner: 10px;
  --radius-button: 10px;
  --radius-segment: 10px;
  --radius-search: 10px;
  --radius-control: 12px;
  --radius-button-lg: 12px;
  --radius-block: 12px;
  --radius-card: 16px;
  --radius-fab: 16px;
  --radius-bubble: 20px;
  --radius-composer: 24px;
  --radius-sheet: 24px;
  --radius-full: 999px;
  --duration-press-in: 80ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 250ms;
  --duration-stream-fade: 180ms;
  --duration-spinner-cycle: 900ms;
  --duration-shimmer: 1400ms;
  --duration-stream-batch: 250ms;
  --duration-long-press: 450ms;
  --duration-toast: 4000ms;
  --duration-toast-error: 10000ms;
  --duration-undo-window: 5000ms;
  --duration-connecting-delay: 1000ms;
  --duration-min-visible: 600ms;
  --duration-busy-delay: 400ms;
  --duration-tap-guard: 500ms;
  --duration-time-gap: 300000ms;
  --duration-time-quiet: 1800000ms;
  --duration-day-pill: 1200ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --easing-enter: cubic-bezier(0.05, 0.7, 0.1, 1);
  --easing-exit: cubic-bezier(0.3, 0, 0.8, 0.15);
  --easing-linear: linear;
  --easing-keyboard: cubic-bezier(0.38, 0.7, 0.125, 1);
  --easing-spring-09: linear(0, 0.053, 0.171, 0.311, 0.45, 0.575, 0.68, 0.766, 0.833, 0.883, 0.921, 0.948, 0.967, 0.98, 0.989, 0.995, 1);
  --easing-spring-10: linear(0, 0.099, 0.285, 0.471, 0.624, 0.741, 0.825, 0.884, 0.924, 0.951, 0.968, 0.98, 0.987, 0.992, 0.995, 0.997, 1);
  --layout-tap-web: 44px;
  --layout-tap-android: 48px;
  --layout-gutter: 20px;
  --layout-list-inset: 16px;
  --layout-max-content-width: 720px;
  --layout-bar-height: 56px;
  --layout-large-title-block: 52px;
  --layout-tab-bar-height: 56px;
  --layout-composer-min-height: 48px;
  --layout-composer-max-lines: 6px;
  --layout-composer-gap: 8px;
  --layout-row-min-height: 52px;
  --layout-session-row-min-height: 72px;
  --layout-sheet-max-width: 640px;
  --layout-sheet-top-gap: 12px;
  --layout-sheet-grabber-width: 36px;
  --layout-sheet-grabber-height: 4px;
  --layout-sheet-medium-detent: 0.5px;
  --layout-icon-sm: 16px;
  --layout-icon-md: 20px;
  --layout-icon-lg: 24px;
  --layout-icon-xl: 44px;
  --layout-status-glyph: 16px;
  --layout-avatar: 28px;
  --layout-badge-height: 16px;
  --layout-jump-button: 40px;
  --layout-bottom-fade: 64px;
  --layout-button-height: 48px;
  --layout-button-medium-height: 40px;
  --layout-button-small-height: 32px;
  --layout-chip-height: 32px;
  --layout-field-height: 44px;
  --layout-search-height: 36px;
  --layout-tab-height: 44px;
  --layout-tab-rule: 2px;
  --layout-narrowest-width: 320px;
  --layout-follow-threshold: 64px;
  --layout-edge-swipe-zone: 24px;
  --layout-sheet-drag-slop: 24px;
  --layout-swipe-action-width: 80px;
  --layout-pull-refresh-threshold: 72px;
  --layout-drag-slop: 8px;
  --layout-time-reveal: 72px;
  --layout-quote-threshold: 64px;
  --layout-dot: 8px;
  --layout-send-button: 32px;
  --layout-thumb-message: 72px;
  --layout-thumb-composer: 56px;
  --layout-code-header-height: 32px;
  --layout-menu-min-width: 220px;
  --layout-empty-max-width: 300px;
  --layout-switch-width: 51px;
  --layout-switch-height: 31px;
  --layout-fab: 56px;
  --layout-slider-height: 44px;
  --layout-slider-thumb: 28px;
  --layout-slider-track: 4px;
  --layout-slider-stop: 4px;
  --layout-page-dot: 7px;
  --layout-page-pill-height: 28px;
  --layout-page-hint-peek: 36px;
  --layout-dial: 112px;
  --layout-dial-compact: 100px;
  --layout-dial-stroke: 7.5px;
  --layout-mini-ring: 16px;
  --layout-chart-height: 150px;
  --layout-chart-bar-max: 24px;
  --layout-hairline: 1px;
}
@media (min-resolution: 2dppx) { :root { --layout-hairline: 0.5px; } }
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #181715;
    --color-surface: #201E1C;
    --color-fill: #2C2926;
    --color-raised: #262320;
    --color-pill: #302D2A;
    --color-thumb: #3A3632;
    --color-sheet: #272522;
    --color-bubble: #302D2A;
    --color-code-bg: #22201E;
    --color-inline-code-bg: #2E2B28;
    --color-scrim: #0000008C;
    --color-skeleton: #282623;
    --color-skeleton-shine: #32302D;
    --color-inverse: #E7E4E0;
    --color-on-inverse: #1C1A18;
    --color-inverse-accent: #885738;
    --color-hairline: #3D3935;
    --color-hairline-strong: #3F3A36;
    --color-control-border: #7B7671;
    --color-focus: #C5A07E;
    --color-text: #E9E6E2;
    --color-text-secondary: #C4BFB9;
    --color-text-tertiary: #9A958F;
    --color-text-disabled: #5E5A56;
    --color-text-on-accent: #181715;
    --color-primary: #E6DED3;
    --color-primary-hover: #EEE7DD;
    --color-primary-pressed: #D2C9BC;
    --color-on-primary: #1B1916;
    --color-link: #9EB8DF;
    --color-accent: #C5A07E;
    --color-accent-pressed: #D6B797;
    --color-accent-soft: #3A2E23;
    --color-attention: #C5A07E;
    --color-attention-soft: #3A2E23;
    --color-activity: #9EB8DF;
    --color-activity-soft: #243044;
    --color-success: #A0C2A5;
    --color-success-soft: #223226;
    --color-warning: #D2B777;
    --color-warning-soft: #342C19;
    --color-danger: #DE9994;
    --color-danger-pressed: #9E4440;
    --color-danger-soft: #3D2524;
    --color-danger-fill: #B24E4A;
    --color-on-danger: #FFF4F2;
    --color-diff-add-bg: #233428;
    --color-diff-del-bg: #3D2527;
    --color-diff-add-word: #2F5439;
    --color-diff-del-word: #653436;
    --color-diff-add-text: #A0C2A5;
    --color-diff-del-text: #DE9994;
    --color-syn-keyword: #CD9BBA;
    --color-syn-string: #9BBCAA;
    --color-syn-number: #D0AD82;
    --color-syn-function: #9EB8DF;
    --color-syn-type: #A2C1CE;
    --color-syn-property: #C5A07E;
    --color-syn-comment: #A6A19B;
    --color-syn-meta: #B3AAD6;
    --color-match: #5A4A1E;
    --color-selection: #285479;
    --color-chart-codex: #3294CC;
    --color-chart-claude: #D6784A;
    --color-chart-grid: #2C2926;
    --color-chart-heat-1: #463F38;
    --color-chart-heat-2: #6D6257;
    --color-chart-heat-3: #A39485;
    --color-chart-heat-4: #DDD1C3;
    --color-chart-series-1: #4A86C8;
    --color-chart-series-2: #CF7043;
    --color-chart-series-3: #2AA07A;
    --color-chart-series-4: #AE872A;
    --color-chart-series-5: #B064A0;
    --color-chart-series-6: #6E9A45;
    --color-chart-series-7: #8274D0;
    --color-chart-series-8: #CF6F88;
    --elevation-flat: none;
    --elevation-card: 0 0 0 1px var(--color-hairline-strong);
    --elevation-thumb: 0 0 0 1px #4A4540, 0 1px 2px #00000080;
    --elevation-edge: calc(-1 * var(--layout-hairline)) 0 0 var(--color-hairline-strong), -8px 0 24px #00000066;
    --elevation-float: 0 0 0 var(--layout-hairline) var(--color-hairline-strong), 0 8px 24px #00000066;
    --elevation-overlay: 0 0 0 var(--layout-hairline) var(--color-hairline-strong), 0 12px 40px #00000080;
  }
}
.type-display { font: 700 1.875rem/1.2 var(--font-sans); letter-spacing: -0.021em; text-wrap: balance; }
.type-title1 { font: 700 1.5rem/1.25 var(--font-sans); letter-spacing: -0.015em; text-wrap: balance; }
.type-title2 { font: 600 1.25rem/1.3 var(--font-sans); letter-spacing: -0.012em; text-wrap: balance; }
.type-title3 { font: 600 1.125rem/1.3333 var(--font-sans); letter-spacing: -0.006em; text-wrap: balance; }
.type-headline { font: 600 1rem/1.375 var(--font-sans); letter-spacing: -0.006em; text-wrap: balance; }
.type-body { font: 400 1rem/1.5 var(--font-sans); letter-spacing: 0em; text-wrap: pretty; }
.type-body-ui { font: 400 1rem/1.375 var(--font-sans); letter-spacing: -0.003em; }
.type-callout { font: 400 0.9375rem/1.4 var(--font-sans); letter-spacing: 0em; text-wrap: pretty; }
.type-subhead { font: 400 0.875rem/1.4286 var(--font-sans); letter-spacing: 0em; }
.type-subhead-strong { font: 600 0.875rem/1.4286 var(--font-sans); letter-spacing: 0em; }
.type-footnote { font: 400 0.8125rem/1.3846 var(--font-sans); letter-spacing: 0.002em; }
.type-footnote-strong { font: 600 0.8125rem/1.3846 var(--font-sans); letter-spacing: 0.004em; }
.type-caption { font: 500 0.75rem/1.3333 var(--font-sans); letter-spacing: 0.012em; }
.type-button { font: 600 1rem/1.25 var(--font-sans); letter-spacing: -0.005em; }
.type-button-medium { font: 600 0.9375rem/1.3333 var(--font-sans); letter-spacing: 0em; }
.type-button-small { font: 600 0.875rem/1.1429 var(--font-sans); letter-spacing: 0em; }
.type-code { font: 400 0.8125rem/1.5385 var(--font-mono); letter-spacing: 0em; }
.type-code-small { font: 400 0.75rem/1.5 var(--font-mono); letter-spacing: 0em; }
.type-code-entry { font: 600 1.5rem/1.25 var(--font-mono); letter-spacing: 0.08em; }
.type-reading { font: 400 1.0625rem/1.6 var(--font-serif); letter-spacing: 0em; text-wrap: pretty; }