html[data-theme="kilo"],
html[data-theme="kilo-console"],
.kilo-console {
  --radius: 0.45rem;
  --radius-xs: calc(var(--radius) * 0.45);
  --radius-sm: calc(var(--radius) * 0.6);
  --radius-md: calc(var(--radius) * 0.8);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) * 1.4);
  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-family-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-size-small: 0.6875rem;
  --font-size-base: 0.75rem;
  --font-size-large: 0.875rem;
  --line-height-normal: 1.45;
  --primary: oklch(0.9519 0.1569 108.263);
  --primary-foreground: oklch(0.147 0.004 49.25);
  --success: #89d185;
  --warning: #cca700;
  --critical: var(--destructive);
  --info: #3794ff;
  --brand: var(--primary);
  --brand-fg: var(--primary-foreground);
  --brand-tint-08: color-mix(in oklab, var(--brand) 8%, transparent);
  --brand-tint-14: color-mix(in oklab, var(--brand) 14%, transparent);
  --brand-tint-22: color-mix(in oklab, var(--brand) 22%, transparent);
  --brand-tint-40: color-mix(in oklab, var(--brand) 40%, transparent);
  --app-header-height: 3.5rem;
  --app-rail-width: 3.5rem;
  --settings-header-height: 3.5rem;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html[data-color-scheme="light"],
.kilo-console:not(.dark) {
  --background: oklch(1 0 0);
  --foreground: oklch(0.147 0.004 49.25);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.147 0.004 49.25);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.147 0.004 49.25);
  --secondary: oklch(0.967 0.001 286.375);
  --secondary-foreground: oklch(0.21 0.006 285.885);
  --muted: oklch(0.97 0.001 106.424);
  --muted-foreground: oklch(0.553 0.013 58.071);
  --accent: oklch(0.97 0.001 106.424);
  --accent-foreground: oklch(0.216 0.006 56.043);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.923 0.003 48.717);
  --input: oklch(0.923 0.003 48.717);
  --ring: oklch(0.709 0.01 56.259);
}

html[data-color-scheme="dark"],
.kilo-console.dark,
.kilo-console {
  --background: oklch(0.147 0.004 49.25);
  --foreground: oklch(0.985 0.001 106.423);
  --card: oklch(0.216 0.006 56.043);
  --card-foreground: oklch(0.985 0.001 106.423);
  --popover: oklch(0.216 0.006 56.043);
  --popover-foreground: oklch(0.985 0.001 106.423);
  --secondary: oklch(0.274 0.006 286.033);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.268 0.007 34.298);
  --muted-foreground: oklch(0.709 0.01 56.259);
  --accent: oklch(0.268 0.007 34.298);
  --accent-foreground: oklch(0.985 0.001 106.423);
  --destructive: oklch(0.704 0.191 22.216);
  --border: oklch(1 0 0 / 10%);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.553 0.013 58.071);
}

html[data-theme="kilo"],
html[data-theme="kilo-console"],
.kilo-console {
  --background-base: var(--background);
  --background-weak: var(--muted);
  --background-strong: var(--background);
  --background-stronger: var(--card);
  --surface-base: color-mix(in oklab, var(--foreground) 4%, transparent);
  --surface-raised-base: var(--card);
  --surface-raised-strong: color-mix(in oklab, var(--card) 88%, var(--foreground) 12%);
  --surface-raised-stronger: color-mix(in oklab, var(--card) 82%, var(--foreground) 18%);
  --surface-float-base: var(--popover);
  --surface-float-base-hover: color-mix(in oklab, var(--popover) 88%, var(--foreground) 12%);
  --surface-inset-base: color-mix(in oklab, var(--input) 55%, transparent);
  --surface-inset-strong: color-mix(in oklab, var(--input) 75%, transparent);
  --surface-brand-base: var(--primary);
  --surface-brand-hover: color-mix(in oklab, var(--primary) 82%, white 18%);
  --surface-success-base: color-mix(in oklab, var(--success) 16%, transparent);
  --surface-warning-base: color-mix(in oklab, var(--warning) 18%, transparent);
  --surface-critical-base: color-mix(in oklab, var(--destructive) 16%, transparent);
  --surface-info-base: color-mix(in oklab, var(--info) 16%, transparent);
  --input-base: color-mix(in oklab, var(--input) 45%, transparent);
  --input-hover: color-mix(in oklab, var(--input) 60%, transparent);
  --input-active: color-mix(in oklab, var(--input) 35%, var(--background));
  --text-base: var(--foreground);
  --text-strong: var(--foreground);
  --text-weak: var(--muted-foreground);
  --text-weaker: color-mix(in oklab, var(--muted-foreground) 75%, transparent);
  --text-interactive-base: var(--primary);
  --text-on-brand-base: var(--primary-foreground);
  --border-base: var(--border);
  --border-hover: color-mix(in oklab, var(--border) 70%, var(--foreground) 30%);
  --border-active: color-mix(in oklab, var(--border) 50%, var(--foreground) 50%);
  --border-weak-base: color-mix(in oklab, var(--border) 75%, transparent);
  --border-strong-base: color-mix(in oklab, var(--border) 70%, var(--foreground) 30%);
  --border-selected: var(--primary);
  --border-focus: var(--primary);
  --button-primary-base: var(--primary);
  --button-secondary-base: var(--secondary);
  --button-secondary-hover: color-mix(in oklab, var(--secondary) 80%, var(--foreground) 20%);
  --icon-base: var(--muted-foreground);
  --icon-hover: var(--foreground);
  --icon-active: var(--foreground);
  --icon-weak-base: var(--text-weaker);
  --icon-strong-base: var(--foreground);
  --icon-brand-base: var(--primary-foreground);
  --icon-success-base: var(--success);
  --icon-warning-base: var(--warning);
  --icon-critical-base: var(--destructive);
  --icon-info-base: var(--info);
}

.kilo-console .mono,
[data-component="config-row"] [data-slot="config-row-subtitle"],
[data-slot="source-badge"] {
  font-family: var(--font-family-mono);
  font-feature-settings: "calt" 0;
}

.kilo-console ::selection {
  background: var(--brand-tint-40);
  color: var(--brand-fg);
}
