/* Generated by replica/design/gen.py from tokens.json. For the marketing site and previews. */
:root {
  --color-bg: #F6F6F7;
  --color-surface: #FFFFFF;
  --color-surface-grouped: #EFEFF2;
  --color-canvas-desk: #E9E9EC;
  --color-paper: #FFFFFF;
  --color-paper-line: #CDD1D8;
  --color-paper-dot: #9BA1AB;
  --color-ink-default: #1B1B1F;
  --color-border: #DCDCE0;
  --color-border-input: #8A8A93;
  --color-text: #1B1B1F;
  --color-text-muted: #4B4B53;
  --color-accent: #1F5C45;
  --color-accent-subtle: #E2EEE8;
  --color-on-accent: #FFFFFF;
  --color-selection: #2F8F6B;
  --color-link: #1B6A4C;
  --color-danger: #C4322C;
  --color-success: #1E7A47;
  --color-warning: #8A5A00;
  --color-focus: #2F8F6B;
  --font-sans: -apple-system, BlinkMacSystemFont, Inter, system-ui, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --type-caption: 400 11px/13px var(--font-sans);
  --type-footnote: 400 13px/18px var(--font-sans);
  --type-subhead: 400 15px/20px var(--font-sans);
  --type-body: 400 17px/22px var(--font-sans);
  --type-headline: 600 17px/22px var(--font-sans);
  --type-title: 700 22px/28px var(--font-sans);
  --type-large-title: 700 34px/41px var(--font-sans);
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-tile: 0 2px 6px rgba(0,0,0,0.12);
  --shadow-popover: 0 8px 24px rgba(0,0,0,0.18);
  --shadow-floating-toolbar: 0 4px 12px rgba(0,0,0,0.14);
  --motion-fast: 0.15s;
  --motion-base: 0.25s;
  --layout-touch-target: 44px;
  --layout-sidebar-width: 320px;
  --layout-nav-row-height: 50px;
  --layout-tool-row-height: 48px;
  --layout-tool-button: 40px;
  --layout-color-slot: 28px;
  --layout-width-dot-hit: 32px;
  --layout-tool-label-width: 72px;
  --layout-popover-width: 320px;
  --layout-sheet-width: 620px;
  --layout-sheet-preview: 140px;
  --layout-library-padding: 24px;
  --layout-library-gutter: 28px;
  --layout-tile-width: 150px;
  --layout-tile-cover-aspect: 0.77px;
  --layout-template-card-width: 84px;
  --layout-thumbnail-width: 120px;
  --layout-page-gap: 16px;
  --layout-hairline: 1px;
  --layout-list-row-height: 64px;
  --layout-list-thumb: 44px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #111113;
    --color-surface: #1C1C1F;
    --color-surface-grouped: #26262A;
    --color-canvas-desk: #0B0B0C;
    --color-paper: #FFFFFF;
    --color-paper-line: #CDD1D8;
    --color-paper-dot: #9BA1AB;
    --color-ink-default: #1B1B1F;
    --color-border: #3A3A40;
    --color-border-input: #8C8C95;
    --color-text: #F2F2F4;
    --color-text-muted: #A3A3AC;
    --color-accent: #9FD8BE;
    --color-accent-subtle: #22362D;
    --color-on-accent: #0E2219;
    --color-selection: #2F8F6B;
    --color-link: #8ED6B3;
    --color-danger: #FF7A72;
    --color-success: #5BD08C;
    --color-warning: #F2B544;
    --color-focus: #8ED6B3;
  }
}
:root[data-theme="dark"] {
  --color-bg: #111113;
  --color-surface: #1C1C1F;
  --color-surface-grouped: #26262A;
  --color-canvas-desk: #0B0B0C;
  --color-paper: #FFFFFF;
  --color-paper-line: #CDD1D8;
  --color-paper-dot: #9BA1AB;
  --color-ink-default: #1B1B1F;
  --color-border: #3A3A40;
  --color-border-input: #8C8C95;
  --color-text: #F2F2F4;
  --color-text-muted: #A3A3AC;
  --color-accent: #9FD8BE;
  --color-accent-subtle: #22362D;
  --color-on-accent: #0E2219;
  --color-selection: #2F8F6B;
  --color-link: #8ED6B3;
  --color-danger: #FF7A72;
  --color-success: #5BD08C;
  --color-warning: #F2B544;
  --color-focus: #8ED6B3;
}