/* GENERATED by build/build-tokens.mjs from tokens/tokens.json (sha256 43e26baffcce). Do not edit by hand.
   Sorve Design System. Semantic variables are --sv-*; the second group in each block is the prototype-compatible
   triplet layer (use as rgb(var(--bg-page))), identical to devin-layout-study/prototype/assets/app.css. */

/* Light theme + theme-independent tokens (default). */
:root,
.light,
[data-theme="light"] {
  --sv-color-bg-wash: #F8F8F8;
  --sv-color-bg-page: #FCFCFC;
  --sv-color-bg-elevated: #FFFFFF;
  --sv-color-bg-inverse: #363636;
  --sv-color-bg-scrim: rgb(0 0 0 / .12);
  --sv-color-text-primary: #191919;
  --sv-color-text-secondary: rgb(25 25 25 / .56);
  --sv-color-text-tertiary: rgb(25 25 25 / .4);
  --sv-color-text-disabled: rgb(25 25 25 / .4);
  --sv-color-text-inverse: #FFFFFF;
  --sv-color-text-link: rgb(13 133 185 / .85);
  --sv-color-tint-primary: rgb(0 0 0 / .08);
  --sv-color-tint-secondary: rgb(0 0 0 / .06);
  --sv-color-tint-tertiary: rgb(0 0 0 / .04);
  --sv-color-tint-faint: rgb(0 0 0 / .02);
  --sv-color-border-primary: rgb(0 0 0 / .08);
  --sv-color-border-secondary: rgb(0 0 0 / .06);
  --sv-color-border-contrast: rgb(0 0 0 / .08);
  --sv-color-accent-default: #3D8B6E;
  --sv-color-accent-text: #3D8B6E;
  --sv-color-accent-subtle: rgb(61 139 110 / .08);
  --sv-color-focus-ring: #3D8B6E;
  --sv-color-status-success-fg: #00A558;
  --sv-color-status-success-bg: rgb(62 237 155 / .2);
  --sv-color-status-warning-fg: #F58E3A;
  --sv-color-status-warning-bg: rgb(245 142 58 / .12);
  --sv-color-status-danger-fg: #F53B3A;
  --sv-color-status-danger-bg: rgb(245 59 58 / .12);
  --sv-color-status-info-fg: #337DF4;
  --sv-color-status-info-bg: rgb(51 125 244 / .1);
  --sv-color-status-done-fg: #956CDE;
  --sv-color-live-live: #00A558;
  --sv-color-live-stale: #F58E3A;
  --sv-color-live-paused: rgb(25 25 25 / .56);
  --sv-color-live-offline: #F53B3A;
  --sv-color-scrollbar-thumb: #EDEDED;
  --sv-color-scrollbar-thumb-hover: #E8E8E8;
  --sv-color-brand-icon-1: #496C63;
  --sv-color-brand-icon-2: #6D8982;
  --sv-color-brand-tile: #FFFFFF;
  --sv-color-brand-tile-line: rgb(0 0 0 / .08);
  --sv-color-brand-wordmark: #191919;
  --sv-font-family-sans: "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-font-family-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --sv-font-family-brand: "Geist", "Inter", system-ui, sans-serif;
  --sv-font-weight-regular: 400;
  --sv-font-weight-medium: 500;
  --sv-font-weight-semibold: 600;
  --sv-type-eyebrow: 500 11px/14px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-eyebrow-size: 11px;
  --sv-type-eyebrow-line: 14px;
  --sv-type-eyebrow-weight: 500;
  --sv-type-eyebrow-tracking: 0.66px;
  --sv-type-eyebrow-transform: uppercase;
  --sv-type-micro: 400 10px/14px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-micro-size: 10px;
  --sv-type-micro-line: 14px;
  --sv-type-micro-weight: 400;
  --sv-type-micro-tracking: 0.1px;
  --sv-type-caption: 400 12px/16px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-caption-size: 12px;
  --sv-type-caption-line: 16px;
  --sv-type-caption-weight: 400;
  --sv-type-caption-tracking: 0px;
  --sv-type-meta: 400 13px/18px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-meta-size: 13px;
  --sv-type-meta-line: 18px;
  --sv-type-meta-weight: 400;
  --sv-type-meta-tracking: -0.065px;
  --sv-type-body: 400 14px/20px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-body-size: 14px;
  --sv-type-body-line: 20px;
  --sv-type-body-weight: 400;
  --sv-type-body-tracking: -0.07px;
  --sv-type-lead: 400 15px/22px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-lead-size: 15px;
  --sv-type-lead-line: 22px;
  --sv-type-lead-weight: 400;
  --sv-type-lead-tracking: -0.075px;
  --sv-type-section: 600 16px/26px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-section-size: 16px;
  --sv-type-section-line: 26px;
  --sv-type-section-weight: 600;
  --sv-type-section-tracking: 0px;
  --sv-type-heading: 600 19px/27px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-heading-size: 19px;
  --sv-type-heading-line: 27px;
  --sv-type-heading-weight: 600;
  --sv-type-heading-tracking: 0px;
  --sv-type-title: 600 22px/28px "Inter", "Inter Fallback", system-ui, sans-serif;
  --sv-type-title-size: 22px;
  --sv-type-title-line: 28px;
  --sv-type-title-weight: 600;
  --sv-type-title-tracking: -0.33px;
  --sv-type-code: 400 12px/16px "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", monospace;
  --sv-type-code-size: 12px;
  --sv-type-code-line: 16px;
  --sv-type-code-weight: 400;
  --sv-type-code-tracking: 0px;
  --sv-type-display: 500 32px/40px "Geist", "Inter", system-ui, sans-serif;
  --sv-type-display-size: 32px;
  --sv-type-display-line: 40px;
  --sv-type-display-weight: 500;
  --sv-type-display-tracking: -0.704px;
  --sv-space-0: 0px;
  --sv-space-1: 4px;
  --sv-space-2: 8px;
  --sv-space-3: 12px;
  --sv-space-4: 16px;
  --sv-space-5: 20px;
  --sv-space-6: 24px;
  --sv-space-7: 28px;
  --sv-space-8: 32px;
  --sv-space-10: 40px;
  --sv-space-12: 48px;
  --sv-space-16: 64px;
  --sv-space-0-5: 2px;
  --sv-space-1-5: 6px;
  --sv-space-2-5: 10px;
  --sv-space-3-5: 14px;
  --sv-space-4-5: 18px;
  --sv-radius-xs: 4px;
  --sv-radius-sm: 6px;
  --sv-radius-md: 8px;
  --sv-radius-lg: 12px;
  --sv-radius-card: 14px;
  --sv-radius-xl: 16px;
  --sv-radius-2xl: 20px;
  --sv-radius-full: 9999px;
  --sv-shadow-L1: 0 1px 2px 0 rgb(0 0 0 / .05);
  --sv-shadow-L2: 0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px 0 #0000000f;
  --sv-shadow-L3: 0 10px 15px -3px #0000000f;
  --sv-shadow-L4: 0 25px 50px -12px rgb(0 0 0 / .25);
  --sv-shadow-inner: inset 1px 1px 1px 0 #0000001a;
  --sv-blur-sm: 8px;
  --sv-blur-md: 12px;
  --sv-duration-instant: 0ms;
  --sv-duration-fast: 150ms;
  --sv-duration-base: 200ms;
  --sv-duration-slow: 300ms;
  --sv-duration-pulse: 2000ms;
  --sv-duration-spin: 2400ms;
  --sv-duration-shimmer: 5000ms;
  --sv-easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sv-easing-out: cubic-bezier(0, 0, 0.2, 1);
  --sv-easing-in: cubic-bezier(0.4, 0, 1, 1);
  --sv-easing-emphasized: cubic-bezier(0.19, 1, 0.22, 1);
  --sv-easing-pulse: cubic-bezier(0.4, 0, 0.6, 1);
  --sv-easing-linear: cubic-bezier(0, 0, 1, 1);
  --sv-size-icon-xs: 13px;
  --sv-size-icon-sm: 14px;
  --sv-size-icon-md: 16px;
  --sv-size-icon-lg: 18px;
  --sv-size-icon-xl: 20px;
  --sv-size-control-xs: 24px;
  --sv-size-control-sm: 28px;
  --sv-size-control-md: 32px;
  --sv-size-control-lg: 40px;
  --sv-size-avatar-sm: 28px;
  --sv-size-avatar-md: 32px;
  --sv-size-dot: 6px;
  --sv-size-frame-inset: 6px;
  --sv-size-sidebar-width: 280px;
  --sv-size-sidebar-top: 48px;
  --sv-size-sidebar-foot: 60px;
  --sv-size-topbar-height: 52px;
  --sv-size-panel-width: 440px;
  --sv-size-panel-width-xl: 380px;
  --sv-size-column-chat: 700px;
  --sv-size-column-wide: 1040px;
  --sv-size-composer-height: 120px;
  --sv-size-toast-width: 360px;
  --sv-size-dialog-width: 480px;
  --sv-size-logo-sidebar: 20px;
  --sv-size-logo-avatar: 16px;
  --sv-breakpoint-sm: 640px;
  --sv-breakpoint-md: 768px;
  --sv-breakpoint-lg: 1024px;
  --sv-breakpoint-xl: 1280px;
  --sv-breakpoint-2xl: 1536px;
  --sv-grid-columns: 12;
  --sv-grid-gutter: 12px;
  --sv-grid-margin: 24px;
  --sv-grid-margin-mobile: 16px;
  --sv-density-row: 32px;
  --sv-density-row-gap: 1px;
  --sv-density-table-row: 44px;
  --sv-z-base: 0;
  --sv-z-sticky: 10;
  --sv-z-panel: 20;
  --sv-z-drawer: 30;
  --sv-z-popover: 40;
  --sv-z-menu: 50;
  --sv-z-toast: 60;
  --sv-z-dialog: 70;
  --sv-z-tooltip: 80;
  
  /* prototype-compatible layer */
  --bg-wash: 248 248 248;
  --bg-page: 252 252 252;
  --bg-elevated: 255 255 255;
  --bg-accent-neutral: 54 54 54;
  --bg-scrim: 0 0 0 / .12;
  --text-primary: 25 25 25;
  --text-secondary: 25 25 25 / .56;
  --text-tertiary: 25 25 25 / .4;
  --text-disabled: 25 25 25 / .4;
  --text-primary-inverse: 255 255 255;
  --text-link: 13 133 185 / .85;
  --tint-primary: 0 0 0 / .08;
  --tint-secondary: 0 0 0 / .06;
  --tint-tertiary: 0 0 0 / .04;
  --tint-faint: 0 0 0 / .02;
  --border-primary: 0 0 0 / .08;
  --border-secondary: 0 0 0 / .06;
  --border-always-black: 0 0 0 / .08;
  --bg-accent-primary: 61 139 110;
  --text-accent-primary: 61 139 110;
  --tint-accent-secondary: 61 139 110 / .08;
  --text-green: 0 165 88;
  --bg-green: 62 237 155 / .2;
  --text-orange: 245 142 58;
  --bg-orange: 245 142 58 / .12;
  --text-red: 245 59 58;
  --bg-red: 245 59 58 / .12;
  --text-blue: 51 125 244;
  --bg-blue: 51 125 244 / .1;
  --text-purple: 149 108 222;
  --scrollbar-thumb: 237 237 237;
  --scrollbar-thumb-hover: 232 232 232;
  --shadow-L1: 0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-L2: 0 1px 3px 0 rgb(0 0 0 / .06), 0 1px 2px 0 #0000000f;
  --shadow-L3: 0 10px 15px -3px #0000000f;
  --shadow-L4: 0 25px 50px -12px rgb(0 0 0 / .25);
  --shadow-inner: inset 1px 1px 1px 0 #0000001a;
  --row-h: 32px;
  --row-gap: 1px;
  --table-row-h: 44px;
  --color-brand-1: var(--sv-color-brand-icon-1);
  --color-brand-2: var(--sv-color-brand-icon-2);
  color-scheme: light;
}

/* Dark theme. */
.dark,
[data-theme="dark"] {
  --sv-color-bg-wash: #191919;
  --sv-color-bg-page: #141414;
  --sv-color-bg-elevated: #1F1F1F;
  --sv-color-bg-inverse: #F9F9F9;
  --sv-color-bg-scrim: rgb(0 0 0 / .32);
  --sv-color-text-primary: rgb(255 255 255 / .9);
  --sv-color-text-secondary: rgb(255 255 255 / .52);
  --sv-color-text-tertiary: rgb(255 255 255 / .4);
  --sv-color-text-disabled: rgb(255 255 255 / .4);
  --sv-color-text-inverse: #000000;
  --sv-color-text-link: rgb(62 184 237 / .85);
  --sv-color-tint-primary: rgb(255 255 255 / .08);
  --sv-color-tint-secondary: rgb(255 255 255 / .05);
  --sv-color-tint-tertiary: rgb(255 255 255 / .03);
  --sv-color-tint-faint: rgb(255 255 255 / .015);
  --sv-color-border-primary: rgb(255 255 255 / .08);
  --sv-color-border-secondary: rgb(255 255 255 / .04);
  --sv-color-accent-default: #56A888;
  --sv-color-accent-text: #6FBF9F;
  --sv-color-accent-subtle: rgb(86 168 136 / .05);
  --sv-color-focus-ring: #6FBF9F;
  --sv-color-status-success-fg: #00EC7E;
  --sv-color-status-success-bg: rgb(0 236 126 / .08);
  --sv-color-status-warning-bg: rgb(245 142 58 / .08);
  --sv-color-live-live: #00EC7E;
  --sv-color-live-paused: rgb(255 255 255 / .52);
  --sv-color-scrollbar-thumb: #202020;
  --sv-color-scrollbar-thumb-hover: #272727;
  --sv-color-brand-icon-1: #90B1A5;
  --sv-color-brand-icon-2: #A6C1B7;
  --sv-color-brand-tile: #000000;
  --sv-color-brand-tile-line: rgb(255 255 255 / .1);
  --sv-color-brand-wordmark: #FFFFFF;
  --sv-shadow-L1: 0 1px 2px 0 rgb(0 0 0 / .2);
  --sv-shadow-L2: 0 1px 3px 0 rgb(0 0 0 / .25), 0 1px 2px 0 #0000000f;
  --sv-shadow-L3: 0 10px 15px -3px #000000a3;
  --sv-shadow-L4: 0 25px 50px -12px rgb(0 0 0 / .5);
  --sv-shadow-inner: inset 0 -1px 1px 0 #ffffff0a;
  
  /* prototype-compatible layer */
  --bg-wash: 25 25 25;
  --bg-page: 20 20 20;
  --bg-elevated: 31 31 31;
  --bg-accent-neutral: 249 249 249;
  --bg-scrim: 0 0 0 / .32;
  --text-primary: 255 255 255 / .9;
  --text-secondary: 255 255 255 / .52;
  --text-tertiary: 255 255 255 / .4;
  --text-disabled: 255 255 255 / .4;
  --text-primary-inverse: 0 0 0;
  --text-link: 62 184 237 / .85;
  --tint-primary: 255 255 255 / .08;
  --tint-secondary: 255 255 255 / .05;
  --tint-tertiary: 255 255 255 / .03;
  --tint-faint: 255 255 255 / .015;
  --border-primary: 255 255 255 / .08;
  --border-secondary: 255 255 255 / .04;
  --bg-accent-primary: 86 168 136;
  --text-accent-primary: 111 191 159;
  --tint-accent-secondary: 86 168 136 / .05;
  --text-green: 0 236 126;
  --bg-green: 0 236 126 / .08;
  --bg-orange: 245 142 58 / .08;
  --scrollbar-thumb: 32 32 32;
  --scrollbar-thumb-hover: 39 39 39;
  --shadow-L1: 0 1px 2px 0 rgb(0 0 0 / .2);
  --shadow-L2: 0 1px 3px 0 rgb(0 0 0 / .25), 0 1px 2px 0 #0000000f;
  --shadow-L3: 0 10px 15px -3px #000000a3;
  --shadow-L4: 0 25px 50px -12px rgb(0 0 0 / .5);
  --shadow-inner: inset 0 -1px 1px 0 #ffffff0a;
  color-scheme: dark;
}

/* Density: comfortable (BP hit-target rule, rows >= 40 px). */
.comfortable,
[data-density="comfortable"] {
  --sv-density-row: 40px;
  --sv-density-row-gap: 2px;
  --sv-density-table-row: 48px;
  --row-h: 40px;
  --row-gap: 2px;
  --table-row-h: 48px;
}

/* Settings > Color > Monochrome, light: every accent/status/brand color becomes the gray of equal luminance. */
:root.mono:not(.dark),
.light.mono,
.mono .light {
  --sv-color-accent-default: #7D7D7D;
  --sv-color-accent-text: #7D7D7D;
  --sv-color-accent-subtle: rgb(125 125 125 / .08);
  --sv-color-focus-ring: #7D7D7D;
  --sv-color-status-success-fg: #8F8F8F;
  --sv-color-status-success-bg: rgb(209 209 209 / .2);
  --sv-color-status-warning-fg: #A8A8A8;
  --sv-color-status-warning-bg: rgb(168 168 168 / .12);
  --sv-color-status-danger-fg: #838383;
  --sv-color-status-danger-bg: rgb(131 131 131 / .12);
  --sv-color-status-info-fg: #818181;
  --sv-color-status-info-bg: rgb(129 129 129 / .1);
  --sv-color-status-done-fg: #828282;
  --sv-color-live-live: #8F8F8F;
  --sv-color-live-stale: #A8A8A8;
  --sv-color-live-paused: rgb(25 25 25 / .56);
  --sv-color-live-offline: #838383;
  --sv-color-brand-icon-1: #656565;
  --sv-color-brand-icon-2: #838383;
  --sv-color-brand-tile: #FFFFFF;
  --sv-color-brand-tile-line: rgb(0 0 0 / .08);
  --sv-color-brand-wordmark: #191919;
}

/* Monochrome, dark. */
.dark.mono,
.mono .dark {
  --sv-color-accent-default: #999999;
  --sv-color-accent-text: #B0B0B0;
  --sv-color-accent-subtle: rgb(153 153 153 / .05);
  --sv-color-focus-ring: #B0B0B0;
  --sv-color-status-success-fg: #CECECE;
  --sv-color-status-success-bg: rgb(206 206 206 / .08);
  --sv-color-status-warning-fg: #A8A8A8;
  --sv-color-status-warning-bg: rgb(168 168 168 / .08);
  --sv-color-status-danger-fg: #838383;
  --sv-color-status-danger-bg: rgb(131 131 131 / .12);
  --sv-color-status-info-fg: #818181;
  --sv-color-status-info-bg: rgb(129 129 129 / .1);
  --sv-color-status-done-fg: #828282;
  --sv-color-live-live: #CECECE;
  --sv-color-live-stale: #A8A8A8;
  --sv-color-live-paused: rgb(255 255 255 / .52);
  --sv-color-live-offline: #838383;
  --sv-color-brand-icon-1: #AAAAAA;
  --sv-color-brand-icon-2: #BBBBBB;
  --sv-color-brand-tile: #000000;
  --sv-color-brand-tile-line: rgb(255 255 255 / .1);
  --sv-color-brand-wordmark: #FFFFFF;
}

/* Reduced motion: transitions collapse to 0 ms; loops (pulse/spin/shimmer) are stopped by the component CSS. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sv-duration-instant: 0ms;
    --sv-duration-fast: 0ms;
    --sv-duration-base: 0ms;
    --sv-duration-slow: 0ms;
    --sv-duration-pulse: 0ms;
    --sv-duration-spin: 0ms;
    --sv-duration-shimmer: 0ms;
  }
}