/* 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-brand-deep: #0b2f28;
  --kx-brand-supporting: #1e4a3a;
  --kx-brand-periwinkle: #4f73ff;
  --kx-shell-frame: var(--kx-brand-deep);
  --kx-shell-text: #f8faf7;
  --kx-shell-secondary: #afbdb7;
  --kx-shell-muted: #91a39c;
  --kx-shell-line: var(--kx-brand-supporting);
  --kx-shell-control-border: #62766d;
  --kx-shell-selected: #f8faf7;
  --kx-shell-on-selected: #0b2f28;
  --kx-shell-focus: #8fa7ff;
  --kx-shell-current: rgb(79 115 255 / .14);
  --kx-shell-on-current: #ffffff;
  --kx-shell-current-indicator: #8fa7ff;
  --kx-mobile-current: #1e3b31;
  --kx-mobile-on-current: #f8faf7;
  --kx-gateway-surface: #254e3f;
  --kx-canvas: #0b1114;
  --kx-surface: #10251f;
  --kx-surface-secondary: #172d26;
  --kx-surface-raised: #10251f;
  --kx-surface-elevated: #1b332b;
  --kx-text: #f8faf7;
  --kx-text-secondary: #afbdb7;
  --kx-text-muted: #91a39c;
  --kx-line: #294039;
  --kx-control-border: #62766d;
  --kx-accent: #8fa7ff;
  --kx-link: #b9c8ff;
  --kx-action: #8fa7ff;
  --kx-on-action: #0b1114;
  --kx-action-hover: #a9baff;
  --kx-action-active: #748fe9;
  --kx-hover: #19342b;
  --kx-selection: #1e3b31;
  --kx-on-selection: #f8faf7;
  --kx-focus: #8fa7ff;
  --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-info: #b9c8ff;
  --kx-info-surface: #1d2d4a;
  --kx-pending: #efd18b;
  --kx-pending-surface: #3b311d;
  --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-brand-deep: #0b2f28;
  --kx-brand-supporting: #1e4a3a;
  --kx-brand-periwinkle: #4f73ff;
  --kx-shell-frame: var(--kx-brand-deep);
  --kx-shell-text: #f8faf7;
  --kx-shell-secondary: #afbdb7;
  --kx-shell-muted: #91a39c;
  --kx-shell-line: var(--kx-brand-supporting);
  --kx-shell-control-border: #62766d;
  --kx-shell-selected: #f8faf7;
  --kx-shell-on-selected: #0b2f28;
  --kx-shell-focus: #8fa7ff;
  --kx-shell-current: rgb(79 115 255 / .14);
  --kx-shell-on-current: #ffffff;
  --kx-shell-current-indicator: #8fa7ff;
  --kx-mobile-current: #eef1ff;
  --kx-mobile-on-current: #0b1114;
  --kx-gateway-surface: #0b2f28;
  --kx-canvas: #f8faf7;
  --kx-surface: #ffffff;
  --kx-surface-secondary: #edf2ef;
  --kx-surface-raised: #ffffff;
  --kx-surface-elevated: #ffffff;
  --kx-text: #0b1114;
  --kx-text-secondary: #536660;
  --kx-text-muted: #5d6e67;
  --kx-line: #e5e7eb;
  --kx-control-border: #71827b;
  --kx-accent: #3658d6;
  --kx-link: #274fc8;
  --kx-action: #0b2f28;
  --kx-on-action: #ffffff;
  --kx-action-hover: #1e4a3a;
  --kx-action-active: #071f1a;
  --kx-hover: #f1f5f2;
  --kx-selection: #edf2ef;
  --kx-on-selection: #0b2f28;
  --kx-focus: #3658d6;
  --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-info: #274fc8;
  --kx-info-surface: #e8edff;
  --kx-pending: #765313;
  --kx-pending-surface: #f9efd4;
  --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); }