/*
 * TW semantic tokens.
 *
 * Raw reusable colors and shared geometry live only here. Screen CSS consumes
 * semantic --tw-* variables and may define only truly local coordinates.
 */

:root {
  color-scheme: light;

  --tw-color-bg: #f4f5f7;
  --tw-color-text: #25282e;
  --tw-color-surface: #ffffff;
  --tw-color-surface-raised: #ffffff;
  --tw-color-surface-subtle: #f0f2f5;
  --tw-color-table-chrome: #e9ecf1;
  --tw-color-table-row: #ffffff;
  --tw-color-muted: #e7eaf0;
  --tw-color-text-muted: #69717d;
  --tw-color-accent: #e4eafc;
  --tw-color-accent-text: #304f9d;
  --tw-color-primary: #4f6fd7;
  --tw-color-primary-hover: #405fc8;
  --tw-color-on-primary: #ffffff;
  --tw-color-border: #dfe3e9;
  --tw-color-border-strong: #cbd1da;
  --tw-color-focus: #6f8ce8;
  --tw-color-success: #2d895e;
  --tw-color-warning: #b66b36;
  --tw-color-warning-soft: #f8e8e1;
  --tw-color-danger: #c54e5a;
  --tw-color-info: #596bd2;
  --tw-color-peach: #efbba5;
  --tw-color-ice: #dce8fb;
  --tw-color-blush: #f1c7dd;
  --tw-color-mint: #dceedb;
  --tw-color-purple: #7754b5;
  --tw-color-gold: #8a5f18;
  --tw-color-gold-soft: #fae9b8;
  --tw-color-rail: #f7f8fa;
  --tw-color-rail-text: #69717d;
  --tw-color-rail-active-text: #25282e;
  --tw-color-rail-border: #dfe3e9;
  --tw-color-overlay: rgb(15 23 42 / 42%);
  --tw-color-shadow: rgb(24 31 44 / 10%);
  --tw-color-shadow-soft: rgb(24 31 44 / 6%);
  --tw-color-reference-bg: #17181a;
  --tw-color-reference-surface: #202226;
  --tw-color-reference-border: #343840;
  --tw-color-reference-text: #f3f4f6;
  --tw-color-reference-muted: #aeb4bf;
  --tw-color-reference-accent: #72a0ff;
  --tw-color-provider-web: #5b8eff;
  --tw-color-provider-telegram: #35a8e9;
  --tw-color-provider-max: #a67cff;
  --tw-color-provider-email: #ef8c52;

  --tw-font-sans: "Google Sans", Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --tw-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --tw-font-micro: 10px;
  --tw-line-micro: 12px;
  --tw-font-meta: 11px;
  --tw-line-meta: 14px;
  --tw-font-ui: 12px;
  --tw-line-ui: 16px;
  --tw-font-heading: 16px;
  --tw-line-heading: 20px;
  --tw-font-title: 20px;
  --tw-line-title: 24px;
  --tw-font-display: 28px;
  --tw-line-display: 34px;
  --tw-weight-medium: 500;
  --tw-weight-semibold: 600;
  --tw-weight-bold: 700;

  --tw-space-0-5: 2px;
  --tw-space-1: 4px;
  --tw-space-1-5: 6px;
  --tw-space-2: 8px;
  --tw-space-2-5: 10px;
  --tw-space-3: 12px;
  --tw-space-4: 16px;
  --tw-space-5: 20px;
  --tw-space-6: 24px;
  --tw-space-8: 32px;
  --tw-space-12: 48px;

  --tw-radius: 6px;
  --tw-registry-table-radius: 6px;
  --tw-frame-radius: var(--tw-registry-table-radius);
  --tw-radius-workspace: 12px;
  --tw-radius-panel: 14px;
  --tw-radius-dot: 50%;
  --tw-taxonomy-border-mix: 28%;
  --tw-control-compact: 30px;
  --tw-control-tool: 26px;
  --tw-control: 32px;
  --tw-control-large: 36px;
  --tw-menu-item: 30px;
  --tw-checkbox-size: 14px;
  --tw-selection-column: 40px;
  --tw-selection-checkbox-nudge: 2px;
  --tw-actions-column: 40px;
  --tw-row-action-nudge: -2px;
  --tw-registry-visual-column: 48px;
  --tw-registry-header-row: 40px;
  --tw-registry-body-row: 50px;
  --tw-registry-row-divider: 2px;
  --tw-registry-footer: 48px;
  --tw-registry-table-min: 980px;
  --tw-registry-primary-column: 260px;
  --tw-registry-data-column: 140px;
  --tw-page-header: 46px;
  --tw-toolbar-height: 52px;
  --tw-tabs-height: 52px;
  --tw-table-mini-row: 44px;
  --tw-content-gutter: 16px;
  --tw-content-max: 1680px;
  --tw-rail-width: 46px;
  --tw-rail-width-expanded: 200px;
  --tw-rail-icon-column: 46px;
  --tw-builder-left: 260px;
  --tw-builder-right: 304px;
  --tw-work-pane: 256px;
  --tw-context-icon-column: 22px;
  --tw-context-end-column: 24px;
  --tw-context-scroll-safe: 6px;
  --tw-single-aside: 276px;
  --tw-settings-nav: 216px;
  --tw-outline-node: 38px;
  --tw-record-fact-min: 150px;
  --tw-sheet-width: 440px;
  --tw-dialog-width: 520px;
  --tw-dialog-wide: 760px;
  --tw-section-header: 38px;
  --tw-icon-sm: 14px;
  --tw-scrollbar-size: 4px;
  --tw-scrollbar-hit-size: 12px;
  --tw-scrollbar-edge-inset: 4px;
  --tw-scrollbar-min-thumb: 32px;
  --tw-scrollbar-idle-opacity: 0.44;
  --tw-scrollbar-active-opacity: 0.9;
  --tw-chat-avatar-size: 28px;
  --tw-chat-bubble-radius: 12px;
  --tw-chat-bubble-bg: var(--tw-color-surface-subtle);
  --tw-chat-bubble-out-bg: color-mix(in srgb, var(--tw-color-primary) 7%, var(--tw-color-surface-subtle));
  --tw-chat-composer-radius: 12px;

  --tw-shadow-xs: 0 1px 3px var(--tw-color-shadow-soft);
  --tw-shadow-sm: 0 4px 18px var(--tw-color-shadow-soft);
  --tw-shadow: 0 14px 34px var(--tw-color-shadow);
  --tw-motion-fast: 140ms;
  --tw-motion-base: 180ms;
  --tw-ease-standard: cubic-bezier(.2, .8, .2, 1);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --tw-color-bg: #111214;
  --tw-color-text: #eef1f6;
  --tw-color-surface: #17181a;
  --tw-color-surface-raised: #1d1f22;
  --tw-color-surface-subtle: #141517;
  --tw-color-table-chrome: #111214;
  --tw-color-table-row: #18191c;
  --tw-color-muted: #272a2f;
  --tw-color-text-muted: #a4aab4;
  --tw-color-accent: #26334f;
  --tw-color-accent-text: #d2dcff;
  --tw-color-primary: #5d7cdf;
  --tw-color-primary-hover: #6e8dea;
  --tw-color-on-primary: #ffffff;
  --tw-color-border: #2d3036;
  --tw-color-border-strong: #3d424b;
  --tw-color-focus: #7897f0;
  --tw-color-success: #79b992;
  --tw-color-warning: #e4a17e;
  --tw-color-warning-soft: #3a2b28;
  --tw-color-danger: #e9858c;
  --tw-color-info: #8d99e2;
  --tw-color-peach: #d99b82;
  --tw-color-ice: #26354c;
  --tw-color-blush: #46333c;
  --tw-color-mint: #2b4035;
  --tw-color-purple: #acb8e9;
  --tw-color-gold: #dfbd72;
  --tw-color-gold-soft: #453b25;
  --tw-color-rail: #111214;
  --tw-color-rail-text: #c5cad2;
  --tw-color-rail-active-text: #f7f9fc;
  --tw-color-rail-border: #2d3036;
  --tw-color-overlay: rgb(6 8 12 / 74%);
  --tw-color-shadow: rgb(0 0 0 / 38%);
  --tw-color-shadow-soft: rgb(0 0 0 / 26%);
}

@media (max-width: 1180px) {
  :root {
    --tw-work-pane: 232px;
  }
}

@media (max-width: 820px) {
  :root {
    --tw-work-pane: 216px;
  }
}

@media (max-width: 700px) {
  :root {
    --tw-content-gutter: 12px;
    --tw-page-header: 46px;
  }
}
