/* Generated by tools/gen-tokens.mjs from replica/design/tokens.json and tokens.dark.json. Do not edit by hand. */

:root {
  --color-bg: #fdfcf9;
  --color-surface: #f3f1ea;
  --color-surface-sunken: #e8e5db;
  --color-surface-raised: #ffffff;
  --color-border: #dbd7cb;
  --color-border-input: #706e63;
  --color-text: #1b1a15;
  --color-text-muted: #57544a;
  --color-accent: #0c6a6e;
  --color-on-accent: #ffffff;
  --color-accent-subtle: #dbeded;
  --color-on-accent-subtle: #06413f;
  --color-selection: #c9e5e5;
  --color-on-selection: #0c2524;
  --color-danger: #b3261e;
  --color-warning: #8a5300;
  --color-success: #1b7344;
  --color-info: #2457c5;
  --color-state-add: #1b7344;
  --color-state-edit: #2457c5;
  --color-state-delete: #b3261e;
  --color-state-conflict: #8a5300;
  --color-state-lock: #6a4bb5;
  --color-state-other: #57544a;
  --color-diff-add-bg: #e4efe6;
  --color-diff-del-bg: #f8e5e1;
  --color-diff-chg-bg: #f5ecd6;
  --color-diff-add-mark: #14602f;
  --color-diff-del-mark: #9b1c1c;
  --color-warning-subtle: #f6ecd6;
  --color-on-warning-subtle: #5c3800;
  --color-danger-subtle: #f8e5e1;
  --color-on-danger-subtle: #7a1a14;
  --color-success-subtle: #e4efe6;
  --color-on-success-subtle: #0f4a2b;
  --color-info-subtle: #e3eaf8;
  --color-on-info-subtle: #1a3f8f;
  --color-lock-subtle: #ece6f7;
  --color-on-lock-subtle: #46307c;
  --color-review-chrome: #283445;
  --color-on-review-chrome: #eef2f7;
  --color-review-subtle: #e6ebf3;
  --color-on-review-subtle: #1f2a3a;
  --color-canvas: #e6e4dd;
  --color-scrim: rgba(27,26,21,0.36);
  --color-shadow: rgba(27,26,21,0.16);
  --color-shadow-soft: rgba(27,26,21,0.07);
  --color-model-lit: #f4f2ec;
  --color-model-shade: #6e6b61;
  --color-highlight: rgba(255,255,255,0.16);
  --elev-1: 0 1px 2px rgba(27,26,21,0.06), 0 1px 1px rgba(27,26,21,0.04);
  --elev-2: 0 2px 6px rgba(27,26,21,0.07), 0 8px 24px rgba(27,26,21,0.10);
  --elev-3: 0 4px 12px rgba(27,26,21,0.08), 0 24px 56px rgba(27,26,21,0.18);
  --font-sans: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Familjen Grotesk", "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --text-xs: 11px;
  --text-xs--line-height: 14px;
  --text-xs--weight: 500;
  --text-sm: 12px;
  --text-sm--line-height: 16px;
  --text-sm--weight: 400;
  --text-base: 13px;
  --text-base--line-height: 18px;
  --text-base--weight: 400;
  --text-md: 14px;
  --text-md--line-height: 20px;
  --text-md--weight: 400;
  --text-lg: 16px;
  --text-lg--line-height: 22px;
  --text-lg--weight: 600;
  --text-xl: 20px;
  --text-xl--line-height: 26px;
  --text-xl--weight: 600;
  --text-code: 13px;
  --text-code--line-height: 20px;
  --text-code--weight: 400;
  --space-0: 0px;
  --space-1: 2px;
  --space-2: 4px;
  --space-3: 6px;
  --space-4: 8px;
  --space-5: 12px;
  --space-6: 16px;
  --space-7: 24px;
  --space-8: 32px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;
  --shadow-pop: 0 8px 24px rgba(16,24,40,.18), 0 1px 3px rgba(16,24,40,.12);
  --shadow-float: 0 1px 2px rgba(16,24,40,.10);
  --motion-fast: 90ms;
  --motion-base: 160ms;
  --motion-ease: cubic-bezier(0.2,0,0,1);
  --layout-toolbar-height: 40px;
  --layout-tab-height: 32px;
  --layout-status-bar-height: 24px;
  --layout-tree-pane-min: 220px;
  --layout-tree-pane-default: 300px;
  --layout-detail-pane-min: 160px;
  --layout-dialog-sm: 420px;
  --layout-dialog-md: 640px;
  --layout-dialog-lg: 960px;
  --layout-focus-ring: 2px;
  --layout-title-bar-height: 32px;
  --layout-breadcrumb-height: 28px;
  --layout-rail-width: 56px;
  color-scheme: light;
}

/* Follow the system unless the user picked a theme explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --color-bg: #14140f;
    --color-surface: #1c1c16;
    --color-surface-sunken: #0e0e0a;
    --color-surface-raised: #25251e;
    --color-border: #35352c;
    --color-border-input: #8a897c;
    --color-text: #edebe2;
    --color-text-muted: #aba99b;
    --color-accent: #4fd1d6;
    --color-on-accent: #04282a;
    --color-accent-subtle: #123134;
    --color-on-accent-subtle: #bdebec;
    --color-selection: #1a4549;
    --color-on-selection: #e9f7f7;
    --color-danger: #ff8a80;
    --color-warning: #f2b24d;
    --color-success: #5ed39a;
    --color-info: #8fb6ff;
    --color-state-add: #5ed39a;
    --color-state-edit: #8fb6ff;
    --color-state-delete: #ff8a80;
    --color-state-conflict: #f2b24d;
    --color-state-lock: #c0a8ff;
    --color-state-other: #aba99b;
    --color-diff-add-bg: #12301d;
    --color-diff-del-bg: #3a1b19;
    --color-diff-chg-bg: #33280f;
    --color-diff-add-mark: #7ee2a8;
    --color-diff-del-mark: #ff9a9a;
    --color-warning-subtle: #33280f;
    --color-on-warning-subtle: #f6d9a3;
    --color-danger-subtle: #3a1b19;
    --color-on-danger-subtle: #ffc9c3;
    --color-success-subtle: #12301d;
    --color-on-success-subtle: #b5ecd0;
    --color-info-subtle: #1a2640;
    --color-on-info-subtle: #c9dbff;
    --color-lock-subtle: #2a2240;
    --color-on-lock-subtle: #ddd0ff;
    --color-review-chrome: #c7d2e2;
    --color-on-review-chrome: #141a24;
    --color-review-subtle: #1e2633;
    --color-on-review-subtle: #d5deeb;
    --color-canvas: #0b0b08;
    --color-scrim: rgba(0,0,0,0.55);
    --color-shadow: rgba(0,0,0,0.5);
    --color-shadow-soft: rgba(0,0,0,0.32);
    --color-model-lit: #d9d6cb;
    --color-model-shade: #3a3930;
    --color-highlight: rgba(255,255,255,0.07);
    --elev-1: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
    --elev-2: 0 2px 8px rgba(0,0,0,0.4), 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
    --elev-3: 0 6px 16px rgba(0,0,0,0.45), 0 28px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
    color-scheme: dark;
  }
}

:root[data-theme='dark'] {
  --color-bg: #14140f;
  --color-surface: #1c1c16;
  --color-surface-sunken: #0e0e0a;
  --color-surface-raised: #25251e;
  --color-border: #35352c;
  --color-border-input: #8a897c;
  --color-text: #edebe2;
  --color-text-muted: #aba99b;
  --color-accent: #4fd1d6;
  --color-on-accent: #04282a;
  --color-accent-subtle: #123134;
  --color-on-accent-subtle: #bdebec;
  --color-selection: #1a4549;
  --color-on-selection: #e9f7f7;
  --color-danger: #ff8a80;
  --color-warning: #f2b24d;
  --color-success: #5ed39a;
  --color-info: #8fb6ff;
  --color-state-add: #5ed39a;
  --color-state-edit: #8fb6ff;
  --color-state-delete: #ff8a80;
  --color-state-conflict: #f2b24d;
  --color-state-lock: #c0a8ff;
  --color-state-other: #aba99b;
  --color-diff-add-bg: #12301d;
  --color-diff-del-bg: #3a1b19;
  --color-diff-chg-bg: #33280f;
  --color-diff-add-mark: #7ee2a8;
  --color-diff-del-mark: #ff9a9a;
  --color-warning-subtle: #33280f;
  --color-on-warning-subtle: #f6d9a3;
  --color-danger-subtle: #3a1b19;
  --color-on-danger-subtle: #ffc9c3;
  --color-success-subtle: #12301d;
  --color-on-success-subtle: #b5ecd0;
  --color-info-subtle: #1a2640;
  --color-on-info-subtle: #c9dbff;
  --color-lock-subtle: #2a2240;
  --color-on-lock-subtle: #ddd0ff;
  --color-review-chrome: #c7d2e2;
  --color-on-review-chrome: #141a24;
  --color-review-subtle: #1e2633;
  --color-on-review-subtle: #d5deeb;
  --color-canvas: #0b0b08;
  --color-scrim: rgba(0,0,0,0.55);
  --color-shadow: rgba(0,0,0,0.5);
  --color-shadow-soft: rgba(0,0,0,0.32);
  --color-model-lit: #d9d6cb;
  --color-model-shade: #3a3930;
  --color-highlight: rgba(255,255,255,0.07);
  --elev-1: 0 1px 2px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.03);
  --elev-2: 0 2px 8px rgba(0,0,0,0.4), 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  --elev-3: 0 6px 16px rgba(0,0,0,0.45), 0 28px 64px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  color-scheme: dark;
}

/* Density: set data-density on the root. Rows, controls and padding follow. */
:root[data-density='compact'] {
  --density-row: 22px;
  --density-control: 24px;
  --density-pad: 4px;
}
:root {
  --density-row: 28px;
  --density-control: 30px;
  --density-pad: 8px;
}
:root[data-density='spacious'] {
  --density-row: 36px;
  --density-control: 36px;
  --density-pad: 12px;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; --motion-base: 0ms; }
}