@import "./variables.css";

/*
 * Classic themes additionally match bare element classes via :where() so a
 * theme class on any element (not just body/.apollo-design) defines the
 * tokens for that subtree. :where() keeps specificity at zero, so existing
 * body.X-level overrides in consuming apps keep winning.
 * :not(.react-flow) excludes ReactFlow wrappers, which add a .light/.dark
 * class of their own (colorMode prop) and must not re-theme their subtree.
 */
body.light, .apollo-design.light, :where(.light:not(.react-flow)) {
  --color-background: #ffffff;
  --color-background-secondary: #f4f5f7;
  --color-background-inverse: #182027;
  --color-background-gray: #cfd8dd;
  --color-background-disabled: #ecedee;
  --color-background-highlight: #fee3dc;
  --color-background-raised: #ffffff;
  --color-background-edit: #ffffff;
  --color-background-gray-emp: #a4b1b8;
  --color-background-hover: #52606914;
  --color-background-pressed: #5260691f;
  --color-background-selected: #e9f1fa;
  --color-selection-indicator: #0067df;
  --color-notification-badge: #000000;
  --color-notification-indicator: #da3b11;
  --color-hover: #e9f1fa;
  --color-curtain: #000000;
  --color-border: #a4b1b8;
  --color-border-disabled: #cfd8dd;
  --color-border-grid: #f4f5f7;
  --color-border-de-emp: #cfd8dd;
  --color-selection: #da3b11;
  --color-logo: #fa4616;
  --color-foreground: #273139;
  --color-foreground-light: #6b7882;
  --color-foreground-emp: #182027;
  --color-foreground-de-emp: #526069;
  --color-foreground-disable: #8a97a0;
  --color-foreground-inverse: #f8f9fa;
  --color-foreground-highlight: #da3b11;
  --color-foreground-highlight-selected: #da3b111a;
  --color-foreground-highlight-selected-hover: #da3b1126;
  --color-foreground-link: #0067df;
  --color-foreground-link-pressed: #00489d;
  --color-foreground-inv-de-emp: #cfd8dd;
  --color-primary: #0067df;
  --color-primary-lighter: #badaff;
  --color-primary-darker: #00489d;
  --color-primary-hover: #0056ba;
  --color-primary-focused: #0056ba;
  --color-primary-pressed: #0067df;
  --color-secondary-focused: #e9f1fa;
  --color-secondary-pressed: #b2d2f3;
  --color-chip-default-background: #cfd8dd;
  --color-chip-error-background: #fff0f1;
  --color-chip-warning-background: #fff3db;
  --color-chip-info-background: #e9f1fa;
  --color-chip-success-background: #eeffe5;
  --color-error-icon: #cc3d45;
  --color-error-icon-inverse: #ff8484;
  --color-error-text: #a6040a;
  --color-error-background: #fff0f1;
  --color-error-foreground-inverse: #ff8484;
  --color-info-foreground: #1665b3;
  --color-info-icon: #1976d2;
  --color-info-icon-inverse: #42a1ff;
  --color-info-text: #1665b3;
  --color-info-foreground-inverse: #42a1ff;
  --color-info-background: #e9f1fa;
  --color-success-icon: #038108;
  --color-success-icon-inverse: #74c94b;
  --color-success-text: #038108;
  --color-success-background: #eeffe5;
  --color-success-foreground-inverse: #74c94b;
  --color-warning-icon: #ffb40e;
  --color-warning-icon-inverse: #ffbb27;
  --color-warning-text: #9e6100;
  --color-warning-background: #fff3db;
  --color-warning-foreground-inverse: #ffbb27;
  --color-icon-default: #526069;
  --color-icon-inverted-default: #cfd8dd;
  --color-toggle-off-hover: #52606914;
  --color-toggle-off-focus: #52606914;
  --color-toggle-off-pressed: #5260691f;
  --color-toggle-on-hover: #0067df14;
  --color-toggle-on-focus: #0067df14;
  --color-toggle-on-pressed: #0067df1f;
  --color-callout-background: #00489d;
  --color-warn: #b6242b;
  --color-warn-darker: #a6040a;
  --color-warn-hover: #b6242b0a;
  --color-warn-focus: #b6242b1f;
  --color-warn-pressed: #b6242b14;
  --color-carousel-background: #f5f9fe;
  --color-icon-button-hover: #52606914;
  --color-icon-button-focus: #52606914;
  --color-icon-button-pressed: #5260691f;
  --color-code-function: #b748b6;
  --color-code-operator: #0067df;
  --color-code-numeric: #1e7f5a;
  --color-code-text: #d91153;
  --color-toggle-thumb-off: #526069;
  --color-toggle-track-off: #cfd8dd;
  --color-toggle-thumb-on: #0067df;
  --color-toggle-track-on: #badaff;
  --color-toggle-thumb-off-disabled: #cfd8dd;
  --color-toggle-track-off-disabled: #ecedee;
  --color-toggle-thumb-on-disabled: #0067df47;
  --color-toggle-track-on-disabled: #badaff61;
  --color-skeleton: #ecedee;
  --color-skeleton-glow: #fbfbfc;
  --color-data-grid-hover: #f1f2f3;
  --color-data-grid-pressed: #eaeced;
  --color-focus-indicator: #0067df;
  --color-focus-indicator-inverse: #66adff;
  --color-chart-purple: #933692;
  --color-chart-pink: #ed145b;
  --color-chart-blue-secondary: #42a1ff;
  --color-chart-light-blue: #38c6f4;
  --color-chart-green: #6eb84a;
  --color-chart-yellow: #ffb40e;
  --color-gradient-general-start: #fafafb;
  --color-gradient-general-end: #ecedef;
  --color-gradient-agent-start: #ffe0ff;
  --color-gradient-agent-end: #cfd9ff;
  --color-gradient-invoked-start: #ddfbf1;
  --color-gradient-invoked-end: #daf3ff;
  --color-gradient-human-start: #f6faff;
  --color-gradient-human-end: #d8eeff;
  --color-background-overlay: #f4f5f7;
  --color-foreground-secondary: #182027;
  --color-foreground-hover: #526069;
  --color-foreground-on-accent: #f8f9fa;
  --color-primary-subtle: #badaff;
  --color-border-muted: #f4f5f7;
  --color-border-deep: #f4f5f7;
  --color-border-inverse: #a4b1b8;
  --color-border-hover: #a4b1b8;

  --border: var(--border-light);
  color-scheme: light;
}

body.light-hc, .apollo-design.light-hc, :where(.light-hc) {
  --color-background: #ffffff;
  --color-background-secondary: #f4f5f7;
  --color-background-inverse: #182027;
  --color-background-gray: #cfd8dd;
  --color-background-disabled: #ecedee;
  --color-background-highlight: #fee3dc;
  --color-background-raised: #ffffff;
  --color-background-edit: #ffffff;
  --color-background-gray-emp: #a4b1b8;
  --color-background-hover: #52606914;
  --color-background-pressed: #5260691f;
  --color-background-selected: #e9f1fa;
  --color-selection-indicator: #00489d;
  --color-notification-badge: #000000;
  --color-notification-indicator: #832107;
  --color-hover: #e9f1fa;
  --color-curtain: #000000;
  --color-border: #6b7882;
  --color-border-disabled: #cfd8dd;
  --color-border-grid: #f4f5f7;
  --color-border-de-emp: #a4b1b8;
  --color-selection: #832107;
  --color-logo: #fa4616;
  --color-foreground: #273139;
  --color-foreground-light: #374652;
  --color-foreground-emp: #182027;
  --color-foreground-de-emp: #374652;
  --color-foreground-disable: #8a97a0;
  --color-foreground-inverse: #f8f9fa;
  --color-foreground-highlight: #832107;
  --color-foreground-highlight-selected: #8321071a;
  --color-foreground-highlight-selected-hover: #83210726;
  --color-foreground-link: #00489d;
  --color-foreground-link-pressed: #00336f;
  --color-foreground-inv-de-emp: #cfd8dd;
  --color-primary: #00489d;
  --color-primary-lighter: #badaff;
  --color-primary-darker: #11508d;
  --color-primary-hover: #00336f;
  --color-primary-focused: #00336f;
  --color-primary-pressed: #00336f;
  --color-secondary-focused: #e9f1fa;
  --color-secondary-pressed: #b2d2f3;
  --color-chip-default-background: #cfd8dd;
  --color-chip-error-background: #fff0f1;
  --color-chip-warning-background: #fff3db;
  --color-chip-info-background: #e9f1fa;
  --color-chip-success-background: #eeffe5;
  --color-error-icon: #a6040a;
  --color-error-icon-inverse: #ff8484;
  --color-error-text: #a6040a;
  --color-error-background: #fff0f1;
  --color-error-foreground-inverse: #ff8484;
  --color-info-foreground: #11508d;
  --color-info-icon: #11508d;
  --color-info-icon-inverse: #42a1ff;
  --color-info-text: #11508d;
  --color-info-foreground-inverse: #42a1ff;
  --color-info-background: #e9f1fa;
  --color-success-icon: #005603;
  --color-success-icon-inverse: #74c94b;
  --color-success-text: #005603;
  --color-success-background: #eeffe5;
  --color-success-foreground-inverse: #74c94b;
  --color-warning-icon: #805a07;
  --color-warning-icon-inverse: #ffbb27;
  --color-warning-text: #273139;
  --color-warning-background: #fff3db;
  --color-warning-foreground-inverse: #ffbb27;
  --color-icon-default: #374652;
  --color-icon-inverted-default: #cfd8dd;
  --color-toggle-off-hover: #52606914;
  --color-toggle-off-focus: #52606914;
  --color-toggle-off-pressed: #5260691f;
  --color-toggle-on-hover: #0067df14;
  --color-toggle-on-focus: #0067df14;
  --color-toggle-on-pressed: #0067df1f;
  --color-callout-background: #00489d;
  --color-warn: #b6242b;
  --color-warn-darker: #a6040a;
  --color-warn-hover: #b6242b0a;
  --color-warn-focus: #b6242b1f;
  --color-warn-pressed: #b6242b14;
  --color-carousel-background: #f5f9fe;
  --color-icon-button-hover: #52606914;
  --color-icon-button-focus: #52606914;
  --color-icon-button-pressed: #5260691f;
  --color-code-function: #8c338b;
  --color-code-operator: #00489d;
  --color-code-numeric: #176245;
  --color-code-text: #a60e3f;
  --color-toggle-thumb-off: #374652;
  --color-toggle-track-off: #cfd8dd;
  --color-toggle-thumb-on: #00489d;
  --color-toggle-track-on: #badaff;
  --color-toggle-thumb-off-disabled: #cfd8dd;
  --color-toggle-track-off-disabled: #ecedee;
  --color-toggle-thumb-on-disabled: #0067df47;
  --color-toggle-track-on-disabled: #badaff61;
  --color-skeleton: #ecedee;
  --color-skeleton-glow: #fbfbfc;
  --color-data-grid-hover: #f1f2f3;
  --color-data-grid-pressed: #eaeced;
  --color-focus-indicator: #00489d;
  --color-focus-indicator-inverse: #badaff;
  --color-chart-purple: #8c338b;
  --color-chart-pink: #d91153;
  --color-chart-blue-secondary: #1976d2;
  --color-chart-light-blue: #278aab;
  --color-chart-green: #038108;
  --color-chart-yellow: #9e6100;
  --color-gradient-general-start: #fafafb;
  --color-gradient-general-end: #ecedef;
  --color-gradient-agent-start: #ffe0ff;
  --color-gradient-agent-end: #cfd9ff;
  --color-gradient-invoked-start: #ddfbf1;
  --color-gradient-invoked-end: #daf3ff;
  --color-gradient-human-start: #f6faff;
  --color-gradient-human-end: #d8eeff;
  --color-background-overlay: #f4f5f7;
  --color-foreground-secondary: #182027;
  --color-foreground-hover: #374652;
  --color-foreground-on-accent: #f8f9fa;
  --color-primary-subtle: #badaff;
  --color-border-muted: #f4f5f7;
  --color-border-deep: #f4f5f7;
  --color-border-inverse: #6b7882;
  --color-border-hover: #6b7882;

  --border: var(--border-light-hc);
  color-scheme: light;
}

body.dark, .apollo-design.dark, :where(.dark:not(.react-flow)) {
  --color-background: #182027;
  --color-background-secondary: #273139;
  --color-background-inverse: #f8f9fa;
  --color-background-gray: #526069;
  --color-background-disabled: #273139;
  --color-background-highlight: #3c383c;
  --color-background-raised: #273139;
  --color-background-edit: #00000099;
  --color-background-gray-emp: #8a97a0;
  --color-background-hover: #cfd8dd14;
  --color-background-pressed: #cfd8dd1f;
  --color-background-selected: #374652;
  --color-selection-indicator: #66adff;
  --color-notification-badge: #ffffff;
  --color-notification-indicator: #ff8f70;
  --color-hover: #374652;
  --color-curtain: #000000;
  --color-border: #8a97a0;
  --color-border-disabled: #526069;
  --color-border-grid: #273139;
  --color-border-de-emp: #526069;
  --color-selection: #ff8f70;
  --color-logo: #ffffff;
  --color-foreground: #f4f5f7;
  --color-foreground-light: #a4b1b8;
  --color-foreground-emp: #f8f9fa;
  --color-foreground-de-emp: #cfd8dd;
  --color-foreground-disable: #a4b1b8;
  --color-foreground-inverse: #182027;
  --color-foreground-highlight: #ff8f70;
  --color-foreground-highlight-selected: #ff8f701a;
  --color-foreground-highlight-selected-hover: #ff8f7026;
  --color-foreground-link: #66adff;
  --color-foreground-link-pressed: #badaff;
  --color-foreground-inv-de-emp: #526069;
  --color-primary: #66adff;
  --color-primary-lighter: #00489d;
  --color-primary-darker: #badaff;
  --color-primary-hover: #87bfff;
  --color-primary-focused: #87bfff;
  --color-primary-pressed: #66adff;
  --color-secondary-focused: #374652;
  --color-secondary-pressed: #11508d;
  --color-chip-default-background: #526069;
  --color-chip-error-background: #000000;
  --color-chip-warning-background: #000000;
  --color-chip-info-background: #000000;
  --color-chip-success-background: #000000;
  --color-error-icon: #ff8484;
  --color-error-icon-inverse: #cc3d45;
  --color-error-text: #ff8484;
  --color-error-background: #000000;
  --color-error-foreground-inverse: #cc3d45;
  --color-info-foreground: #42a1ff;
  --color-info-icon: #42a1ff;
  --color-info-icon-inverse: #1976d2;
  --color-info-text: #42a1ff;
  --color-info-foreground-inverse: #1976d2;
  --color-info-background: #000000;
  --color-success-icon: #74c94b;
  --color-success-icon-inverse: #038108;
  --color-success-text: #74c94b;
  --color-success-background: #000000;
  --color-success-foreground-inverse: #6eb84a;
  --color-warning-icon: #ffbb27;
  --color-warning-icon-inverse: #ffb40e;
  --color-warning-text: #ffe19e;
  --color-warning-background: #000000;
  --color-warning-foreground-inverse: #ffb40e;
  --color-icon-default: #cfd8dd;
  --color-icon-inverted-default: #526069;
  --color-toggle-off-hover: #cfd8dd14;
  --color-toggle-off-focus: #cfd8dd14;
  --color-toggle-off-pressed: #cfd8dd1f;
  --color-toggle-on-hover: #66adff14;
  --color-toggle-on-focus: #66adff14;
  --color-toggle-on-pressed: #66adff1f;
  --color-callout-background: #00489d;
  --color-warn: #ff8484;
  --color-warn-darker: #ffadad;
  --color-warn-hover: #ff84840a;
  --color-warn-focus: #ff84841f;
  --color-warn-pressed: #ff848414;
  --color-carousel-background: #1b2630;
  --color-icon-button-hover: #cfd8dd14;
  --color-icon-button-focus: #cfd8dd14;
  --color-icon-button-pressed: #cfd8dd1f;
  --color-code-function: #dc80db;
  --color-code-operator: #66adff;
  --color-code-numeric: #6ecdb6;
  --color-code-text: #f25a8c;
  --color-toggle-thumb-off: #cfd8dd;
  --color-toggle-track-off: #526069;
  --color-toggle-thumb-on: #66adff;
  --color-toggle-track-on: #00489d;
  --color-toggle-thumb-off-disabled: #526069;
  --color-toggle-track-off-disabled: #374652;
  --color-toggle-thumb-on-disabled: #66adff47;
  --color-toggle-track-on-disabled: #00489d61;
  --color-skeleton: #273139;
  --color-skeleton-glow: #525a61;
  --color-data-grid-hover: #272f36;
  --color-data-grid-pressed: #2e363d;
  --color-focus-indicator: #66adff;
  --color-focus-indicator-inverse: #0067df;
  --color-chart-purple: #b748b6;
  --color-chart-pink: #f25a8c;
  --color-chart-blue-secondary: #42a1ff;
  --color-chart-light-blue: #44cffc;
  --color-chart-green: #74c94b;
  --color-chart-yellow: #ffbb27;
  --color-gradient-general-start: #526069;
  --color-gradient-general-end: #323c42;
  --color-gradient-agent-start: #a280bc;
  --color-gradient-agent-end: #577bae;
  --color-gradient-invoked-start: #51868e;
  --color-gradient-invoked-end: #35667d;
  --color-gradient-human-start: #6885ab;
  --color-gradient-human-end: #2b5372;
  --color-background-overlay: #374652;
  --color-foreground-secondary: #f8f9fa;
  --color-foreground-hover: #cfd8dd;
  --color-foreground-on-accent: #182027;
  --color-primary-subtle: #00489d;
  --color-border-muted: #273139;
  --color-border-deep: #273139;
  --color-border-inverse: #8a97a0;
  --color-border-hover: #8a97a0;

  --border: var(--border-dark);
  color-scheme: dark;
}

body.dark-hc, .apollo-design.dark-hc, :where(.dark-hc) {
  --color-background: #182027;
  --color-background-secondary: #273139;
  --color-background-inverse: #f8f9fa;
  --color-background-gray: #374652;
  --color-background-disabled: #273139;
  --color-background-highlight: #3c383c;
  --color-background-raised: #273139;
  --color-background-edit: #00000099;
  --color-background-gray-emp: #a4b1b8;
  --color-background-hover: #a4b1b814;
  --color-background-pressed: #cfd8dd1f;
  --color-background-selected: #374652;
  --color-selection-indicator: #dae8fa;
  --color-notification-badge: #ffffff;
  --color-notification-indicator: #ff8f70;
  --color-hover: #273139;
  --color-curtain: #000000;
  --color-border: #bbc7cd;
  --color-border-disabled: #8a97a0;
  --color-border-grid: #273139;
  --color-border-de-emp: #a4b1b8;
  --color-selection: #fda891;
  --color-logo: #ffffff;
  --color-foreground: #f4f5f7;
  --color-foreground-light: #bbc7cd;
  --color-foreground-emp: #f8f9fa;
  --color-foreground-de-emp: #cfd8dd;
  --color-foreground-disable: #a4b1b8;
  --color-foreground-inverse: #182027;
  --color-foreground-highlight: #ff8f70;
  --color-foreground-highlight-selected: #ff8f701a;
  --color-foreground-highlight-selected-hover: #ff8f7026;
  --color-foreground-link: #87bfff;
  --color-foreground-link-pressed: #badaff;
  --color-foreground-inv-de-emp: #374652;
  --color-primary: #badaff;
  --color-primary-lighter: #00336f;
  --color-primary-darker: #badaff;
  --color-primary-hover: #87bfff;
  --color-primary-focused: #87bfff;
  --color-primary-pressed: #66adff;
  --color-secondary-focused: #273139;
  --color-secondary-pressed: #11508d;
  --color-chip-default-background: #526069;
  --color-chip-error-background: #000000;
  --color-chip-warning-background: #000000;
  --color-chip-info-background: #000000;
  --color-chip-success-background: #000000;
  --color-error-icon: #ffadad;
  --color-error-icon-inverse: #b6242b;
  --color-error-text: #ffadad;
  --color-error-background: #000000;
  --color-error-foreground-inverse: #b6242b;
  --color-info-foreground: #42a1ff;
  --color-info-icon: #8cc2f8;
  --color-info-icon-inverse: #0056ba;
  --color-info-text: #42a1ff;
  --color-info-foreground-inverse: #1976d2;
  --color-info-background: #000000;
  --color-success-icon: #74c94b;
  --color-success-icon-inverse: #6eb84a;
  --color-success-text: #74c94b;
  --color-success-background: #000000;
  --color-success-foreground-inverse: #6eb84a;
  --color-warning-icon: #ffbb27;
  --color-warning-icon-inverse: #ffb40e;
  --color-warning-text: #ffe19e;
  --color-warning-background: #000000;
  --color-warning-foreground-inverse: #ffb40e;
  --color-icon-default: #cfd8dd;
  --color-icon-inverted-default: #374652;
  --color-toggle-off-hover: #cfd8dd14;
  --color-toggle-off-focus: #cfd8dd14;
  --color-toggle-off-pressed: #cfd8dd1f;
  --color-toggle-on-hover: #66adff14;
  --color-toggle-on-focus: #66adff14;
  --color-toggle-on-pressed: #66adff1f;
  --color-callout-background: #00489d;
  --color-warn: #ffadad;
  --color-warn-darker: #ffadad;
  --color-warn-hover: #ff84840a;
  --color-warn-focus: #ff84841f;
  --color-warn-pressed: #ff848414;
  --color-carousel-background: #1b2630;
  --color-icon-button-hover: #cfd8dd14;
  --color-icon-button-focus: #cfd8dd14;
  --color-icon-button-pressed: #cfd8dd1f;
  --color-code-function: #dc80db;
  --color-code-operator: #66adff;
  --color-code-numeric: #6ecdb6;
  --color-code-text: #fd7da7;
  --color-toggle-thumb-off: #cfd8dd;
  --color-toggle-track-off: #526069;
  --color-toggle-thumb-on: #66adff;
  --color-toggle-track-on: #00489d;
  --color-toggle-thumb-off-disabled: #526069;
  --color-toggle-track-off-disabled: #374652;
  --color-toggle-thumb-on-disabled: #66adff47;
  --color-toggle-track-on-disabled: #00489d61;
  --color-skeleton: #273139;
  --color-skeleton-glow: #525a61;
  --color-data-grid-hover: #272f36;
  --color-data-grid-pressed: #2e363d;
  --color-focus-indicator: #b2d2f3;
  --color-focus-indicator-inverse: #0067df;
  --color-chart-purple: #dc80db;
  --color-chart-pink: #fd7da7;
  --color-chart-blue-secondary: #8cc2f8;
  --color-chart-light-blue: #44cffc;
  --color-chart-green: #74c94b;
  --color-chart-yellow: #ffbb27;
  --color-gradient-general-start: #526069;
  --color-gradient-general-end: #323c42;
  --color-gradient-agent-start: #a280bc;
  --color-gradient-agent-end: #577bae;
  --color-gradient-invoked-start: #51868e;
  --color-gradient-invoked-end: #35667d;
  --color-gradient-human-start: #6885ab;
  --color-gradient-human-end: #2b5372;
  --color-background-overlay: #374652;
  --color-foreground-secondary: #f8f9fa;
  --color-foreground-hover: #cfd8dd;
  --color-foreground-on-accent: #182027;
  --color-primary-subtle: #00336f;
  --color-border-muted: #273139;
  --color-border-deep: #273139;
  --color-border-inverse: #bbc7cd;
  --color-border-hover: #bbc7cd;

  --border: var(--border-dark-hc);
  color-scheme: dark;
}

/* Future themes use bare class selectors (not gated on body/.apollo-design)
   so they can be scoped to any element, matching how apollo-wind applies them. */
body.future-dark, .future-dark {
  --color-background: #09090b;
  --color-background-secondary: #18181b;
  --color-background-inverse: #fafafa;
  --color-background-gray: #52525c;
  --color-background-disabled: #18181b;
  --color-background-highlight: #053345;
  --color-background-raised: #18181b;
  --color-background-edit: #00000099;
  --color-background-gray-emp: #71717b;
  --color-background-hover: #d4d4d814;
  --color-background-pressed: #d4d4d81f;
  --color-background-selected: #3f3f46;
  --color-selection-indicator: #00b8db;
  --color-notification-badge: #ffffff;
  --color-notification-indicator: #ff637e;
  --color-hover: #3f3f46;
  --color-curtain: #000000;
  --color-border: #3f3f46;
  --color-border-disabled: #27272a;
  --color-border-grid: #27272a;
  --color-border-de-emp: #27272a;
  --color-selection: #00d3f2;
  --color-logo: #ffffff;
  --color-foreground: #fafafa;
  --color-foreground-light: #9f9fa9;
  --color-foreground-emp: #ffffff;
  --color-foreground-de-emp: #9f9fa9;
  --color-foreground-disable: #71717b;
  --color-foreground-inverse: #09090b;
  --color-foreground-highlight: #00d3f2;
  --color-foreground-highlight-selected: #00d3f21a;
  --color-foreground-highlight-selected-hover: #00d3f226;
  --color-foreground-link: #00d3f2;
  --color-foreground-link-pressed: #53eafd;
  --color-foreground-inv-de-emp: #52525c;
  --color-primary: #00b8db;
  --color-primary-lighter: #53eafd;
  --color-primary-darker: #0092b8;
  --color-primary-hover: #00d3f2;
  --color-primary-focused: #00d3f2;
  --color-primary-pressed: #00b8db;
  --color-secondary-focused: #3f3f46;
  --color-secondary-pressed: #104e64;
  --color-chip-default-background: #52525c;
  --color-chip-error-background: #460809;
  --color-chip-warning-background: #461901;
  --color-chip-info-background: #053345;
  --color-chip-success-background: #002c22;
  --color-error-icon: #ff8484;
  --color-error-icon-inverse: #cc3d45;
  --color-error-text: #ff8484;
  --color-error-background: #460809;
  --color-error-foreground-inverse: #cc3d45;
  --color-info-foreground: #00d3f2;
  --color-info-icon: #00d3f2;
  --color-info-icon-inverse: #0092b8;
  --color-info-text: #00d3f2;
  --color-info-foreground-inverse: #0092b8;
  --color-info-background: #053345;
  --color-success-icon: #00d492;
  --color-success-icon-inverse: #007a55;
  --color-success-text: #00d492;
  --color-success-background: #002c22;
  --color-success-foreground-inverse: #007a55;
  --color-warning-icon: #ffb900;
  --color-warning-icon-inverse: #fe9a00;
  --color-warning-text: #ffb900;
  --color-warning-background: #461901;
  --color-warning-foreground-inverse: #fe9a00;
  --color-icon-default: #9f9fa9;
  --color-icon-inverted-default: #52525c;
  --color-toggle-off-hover: #d4d4d814;
  --color-toggle-off-focus: #d4d4d814;
  --color-toggle-off-pressed: #d4d4d81f;
  --color-toggle-on-hover: #00b8db14;
  --color-toggle-on-focus: #00b8db14;
  --color-toggle-on-pressed: #00b8db1f;
  --color-callout-background: #007595;
  --color-warn: #ff8484;
  --color-warn-darker: #ffadad;
  --color-warn-hover: #ff84840a;
  --color-warn-focus: #ff84841f;
  --color-warn-pressed: #ff848414;
  --color-carousel-background: #053345;
  --color-icon-button-hover: #d4d4d814;
  --color-icon-button-focus: #d4d4d814;
  --color-icon-button-pressed: #d4d4d81f;
  --color-code-function: #a684ff;
  --color-code-operator: #00d3f2;
  --color-code-numeric: #ffb900;
  --color-code-text: #00d492;
  --color-toggle-thumb-off: #d4d4d8;
  --color-toggle-track-off: #52525c;
  --color-toggle-thumb-on: #00b8db;
  --color-toggle-track-on: #005f78;
  --color-toggle-thumb-off-disabled: #52525c;
  --color-toggle-track-off-disabled: #3f3f46;
  --color-toggle-thumb-on-disabled: #00b8db47;
  --color-toggle-track-on-disabled: #005f7861;
  --color-skeleton: #27272a;
  --color-skeleton-glow: #52525c;
  --color-data-grid-hover: #27272a;
  --color-data-grid-pressed: #3f3f46;
  --color-focus-indicator: #9f9fa9;
  --color-focus-indicator-inverse: #52525c;
  --color-chart-purple: #a684ff;
  --color-chart-pink: #ff637e;
  --color-chart-blue-secondary: #00d3f2;
  --color-chart-light-blue: #00bcff;
  --color-chart-green: #00d492;
  --color-chart-yellow: #ffb900;
  --color-gradient-general-start: #526069;
  --color-gradient-general-end: #323c42;
  --color-gradient-agent-start: #a280bc;
  --color-gradient-agent-end: #577bae;
  --color-gradient-invoked-start: #51868e;
  --color-gradient-invoked-end: #35667d;
  --color-gradient-human-start: #6885ab;
  --color-gradient-human-end: #2b5372;
  --color-background-overlay: #27272a;
  --color-foreground-secondary: #f4f4f5;
  --color-foreground-hover: #d4d4d8;
  --color-foreground-on-accent: #09090b;
  --color-primary-subtle: #053345;
  --color-border-muted: #18181b;
  --color-border-deep: #09090b;
  --color-border-inverse: #e4e4e7;
  --color-border-hover: #52525c;

  --border: var(--border-future-dark);
  color-scheme: dark;
}

body.future-light, .future-light {
  --color-background: #fafafa;
  --color-background-secondary: #f4f4f5;
  --color-background-inverse: #09090b;
  --color-background-gray: #d4d4d8;
  --color-background-disabled: #e4e4e7;
  --color-background-highlight: #cefafe;
  --color-background-raised: #f4f4f5;
  --color-background-edit: #ffffff;
  --color-background-gray-emp: #9f9fa9;
  --color-background-hover: #52525c14;
  --color-background-pressed: #52525c1f;
  --color-background-selected: #d4d4d8;
  --color-selection-indicator: #00b8db;
  --color-notification-badge: #000000;
  --color-notification-indicator: #ec003f;
  --color-hover: #d4d4d8;
  --color-curtain: #000000;
  --color-border: #d4d4d8;
  --color-border-disabled: #e4e4e7;
  --color-border-grid: #e4e4e7;
  --color-border-de-emp: #e4e4e7;
  --color-selection: #0092b8;
  --color-logo: #000000;
  --color-foreground: #09090b;
  --color-foreground-light: #71717b;
  --color-foreground-emp: #000000;
  --color-foreground-de-emp: #71717b;
  --color-foreground-disable: #9f9fa9;
  --color-foreground-inverse: #fafafa;
  --color-foreground-highlight: #0092b8;
  --color-foreground-highlight-selected: #0092b81a;
  --color-foreground-highlight-selected-hover: #0092b826;
  --color-foreground-link: #007595;
  --color-foreground-link-pressed: #005f78;
  --color-foreground-inv-de-emp: #d4d4d8;
  --color-primary: #00b8db;
  --color-primary-lighter: #cefafe;
  --color-primary-darker: #007595;
  --color-primary-hover: #0092b8;
  --color-primary-focused: #0092b8;
  --color-primary-pressed: #00b8db;
  --color-secondary-focused: #cefafe;
  --color-secondary-pressed: #a2f4fd;
  --color-chip-default-background: #d4d4d8;
  --color-chip-error-background: #fff0f1;
  --color-chip-warning-background: #fef3c6;
  --color-chip-info-background: #cefafe;
  --color-chip-success-background: #d0fae5;
  --color-error-icon: #cc3d45;
  --color-error-icon-inverse: #ff8484;
  --color-error-text: #a6040a;
  --color-error-background: #fff0f1;
  --color-error-foreground-inverse: #ff8484;
  --color-info-foreground: #007595;
  --color-info-icon: #0092b8;
  --color-info-icon-inverse: #00d3f2;
  --color-info-text: #007595;
  --color-info-foreground-inverse: #00d3f2;
  --color-info-background: #cefafe;
  --color-success-icon: #007a55;
  --color-success-icon-inverse: #00d492;
  --color-success-text: #007a55;
  --color-success-background: #d0fae5;
  --color-success-foreground-inverse: #00d492;
  --color-warning-icon: #fe9a00;
  --color-warning-icon-inverse: #ffb900;
  --color-warning-text: #bb4d00;
  --color-warning-background: #fef3c6;
  --color-warning-foreground-inverse: #ffb900;
  --color-icon-default: #52525c;
  --color-icon-inverted-default: #d4d4d8;
  --color-toggle-off-hover: #52525c14;
  --color-toggle-off-focus: #52525c14;
  --color-toggle-off-pressed: #52525c1f;
  --color-toggle-on-hover: #00b8db14;
  --color-toggle-on-focus: #00b8db14;
  --color-toggle-on-pressed: #00b8db1f;
  --color-callout-background: #007595;
  --color-warn: #b6242b;
  --color-warn-darker: #a6040a;
  --color-warn-hover: #b6242b0a;
  --color-warn-focus: #b6242b1f;
  --color-warn-pressed: #b6242b14;
  --color-carousel-background: #ecfeff;
  --color-icon-button-hover: #52525c14;
  --color-icon-button-focus: #52525c14;
  --color-icon-button-pressed: #52525c1f;
  --color-code-function: #7f22fe;
  --color-code-operator: #007595;
  --color-code-numeric: #bb4d00;
  --color-code-text: #007a55;
  --color-toggle-thumb-off: #52525c;
  --color-toggle-track-off: #d4d4d8;
  --color-toggle-thumb-on: #00b8db;
  --color-toggle-track-on: #a2f4fd;
  --color-toggle-thumb-off-disabled: #d4d4d8;
  --color-toggle-track-off-disabled: #e4e4e7;
  --color-toggle-thumb-on-disabled: #00b8db47;
  --color-toggle-track-on-disabled: #a2f4fd61;
  --color-skeleton: #e4e4e7;
  --color-skeleton-glow: #fafafa;
  --color-data-grid-hover: #f4f4f5;
  --color-data-grid-pressed: #e4e4e7;
  --color-focus-indicator: #52525c;
  --color-focus-indicator-inverse: #9f9fa9;
  --color-chart-purple: #7f22fe;
  --color-chart-pink: #ec003f;
  --color-chart-blue-secondary: #0092b8;
  --color-chart-light-blue: #0084d1;
  --color-chart-green: #009966;
  --color-chart-yellow: #e17100;
  --color-gradient-general-start: #fafafb;
  --color-gradient-general-end: #ecedef;
  --color-gradient-agent-start: #ffe0ff;
  --color-gradient-agent-end: #cfd9ff;
  --color-gradient-invoked-start: #ddfbf1;
  --color-gradient-invoked-end: #daf3ff;
  --color-gradient-human-start: #f6faff;
  --color-gradient-human-end: #d8eeff;
  --color-background-overlay: #e4e4e7;
  --color-foreground-secondary: #18181b;
  --color-foreground-hover: #52525c;
  --color-foreground-on-accent: #09090b;
  --color-primary-subtle: #ecfeff;
  --color-border-muted: #f4f4f5;
  --color-border-deep: #fafafa;
  --color-border-inverse: #3f3f46;
  --color-border-hover: #9f9fa9;

  --border: var(--border-future-light);
  color-scheme: light;
}
