/* Semantic appearance contract. Loaded before React to prevent a wrong-theme flash.
   Color values belong here; components consume roles, never palette literals. */
:root, .kx-palette[data-appearance="dark"] {
  --kx-canvas: #101916;
  --kx-surface: #19251f;
  --kx-surface-secondary: #1d2c24;
  --kx-surface-raised: #26372d;
  --kx-text: #f1f5ef;
  --kx-text-secondary: #b3c1b7;
  --kx-text-muted: #99aa9f;
  --kx-line: #405149;
  --kx-control-border: #7a8d80;
  --kx-accent: #a2bfff;
  --kx-action: #a2bfff;
  --kx-on-action: #102039;
  --kx-action-hover: #bdd0ff;
  --kx-action-active: #89aaf0;
  --kx-hover: #2b3e32;
  --kx-selection: #283e67;
  --kx-on-selection: #e1eaff;
  --kx-focus: #b8cdff;
  --kx-disabled-surface: #29362f;
  --kx-disabled-text: #a0ada5;
  --kx-success: #a0dfb7;
  --kx-success-surface: #1a3527;
  --kx-warning: #efd18b;
  --kx-warning-surface: #3b311d;
  --kx-danger: #ffb4b4;
  --kx-danger-surface: #3e2428;
  --kx-overlay: rgb(3 10 7 / .76);
  --kx-shadow: 0 16px 48px rgb(0 0 0 / .28);
  --kx-tooltip: #e3ebe1;
  --kx-on-tooltip: #152521;
  --kx-chart-1: #a2bfff;
  --kx-chart-2: #a0dfb7;
  --kx-chart-3: #efd18b;
  --kx-chart-4: #ddafe6;
  --kx-skeleton: #354a3e;
}
:root[data-theme="light"], .kx-palette[data-appearance="light"] {
  --kx-canvas: #f8f9f5;
  --kx-surface: #ffffff;
  --kx-surface-secondary: #eef1eb;
  --kx-surface-raised: #e5ebe2;
  --kx-text: #152521;
  --kx-text-secondary: #526158;
  --kx-text-muted: #5d695f;
  --kx-line: #cbd3c9;
  --kx-control-border: #79877c;
  --kx-accent: #2456ca;
  --kx-action: #2456ca;
  --kx-on-action: #ffffff;
  --kx-action-hover: #1943a3;
  --kx-action-active: #143781;
  --kx-hover: #dce5d8;
  --kx-selection: #e0e9fc;
  --kx-on-selection: #183c8b;
  --kx-focus: #2456ca;
  --kx-disabled-surface: #e1e6de;
  --kx-disabled-text: #637066;
  --kx-success: #23633e;
  --kx-success-surface: #e3f1e7;
  --kx-warning: #765313;
  --kx-warning-surface: #f9efd4;
  --kx-danger: #a52c35;
  --kx-danger-surface: #fbe9e9;
  --kx-overlay: rgb(21 37 33 / .44);
  --kx-shadow: 0 16px 48px rgb(21 37 33 / .12);
  --kx-tooltip: #25372c;
  --kx-on-tooltip: #f1f5ef;
  --kx-chart-1: #2456ca;
  --kx-chart-2: #23633e;
  --kx-chart-3: #876115;
  --kx-chart-4: #85478c;
  --kx-skeleton: #cbd6c6;
}
/* The initial document and native controls use the same resolved appearance. */
html { background: var(--kx-canvas); }