/*
 * Kendo Meridian theme (v14). Inter at 16/24, 38px controls, slate primary with an indigo secondary
 * for selection. Derived colours use the theme's own relative-colour formulas, so only the main tokens change in dark mode.
 */

:root {
  --kendo-color-app-surface: oklch(100% 0 0deg);
  --kendo-color-surface: oklch(98.46% 0.0017 247.84deg);
  --kendo-color-base: oklch(96.92% 0.0034 247.86deg);
  --kendo-color-primary: oklch(37.17% 0.0392 257.29deg);
  --kendo-color-secondary: oklch(54.53% 0.2124 275.85deg);
  --kendo-color-subtle: oklch(55.44% 0.0407 257.42deg);
  --kendo-color-border: oklch(79.5% 0.0197 255.55deg / 0.35);
  --kendo-color-border-alt: oklch(79.5% 0.0197 255.55deg / 0.5);

  --kendo-color-on-app-surface: oklch(from var(--kendo-color-app-surface) clamp(0.2836, (0.65 - l) * 99999, 0.95) 0.0243 calc(h + 261.13));
  --kendo-color-surface-alt: oklch(from var(--kendo-color-surface) 1 0 h);
  --kendo-color-base-hover: oklch(from var(--kendo-color-base) clamp(0.01, calc(l + clamp(-0.0395, (0.35 - l) * 99999, 0.0395)), 0.99) calc(c + 0.0058) calc(h + 10.48));
  --kendo-color-base-active: oklch(from var(--kendo-color-base) clamp(0.02, calc(l + clamp(-0.0673, (0.35 - l) * 99999, 0.0673)), 0.98) calc(c + 0.0076) calc(h + 8.84));
  --kendo-color-base-emphasis: oklch(from var(--kendo-color-base) clamp(0.05, calc(l + clamp(-0.0984, (0.35 - l) * 99999, 0.0984)), 0.95) calc(c + 0.0094) calc(h + 7.65));
  --kendo-color-base-subtle: oklch(from var(--kendo-color-base) clamp(0.01, calc(l + clamp(-0.0182, (0.35 - l) * 99999, 0.0182)), 0.99) calc(c + 0.0028) calc(h + 7.62));
  --kendo-color-base-subtle-hover: oklch(from var(--kendo-color-base) clamp(0.02, calc(l + clamp(-0.0395, (0.35 - l) * 99999, 0.0395)), 0.98) calc(c + 0.0058) calc(h + 10.48));
  --kendo-color-base-subtle-active: oklch(from var(--kendo-color-base) clamp(0.03, calc(l + clamp(-0.0673, (0.35 - l) * 99999, 0.0673)), 0.97) calc(c + 0.0076) calc(h + 8.84));
  --kendo-color-base-on-subtle: oklch(from var(--kendo-color-base) clamp(0.2836, (0.65 - l) * 99999, 0.95) 0.0243 calc(h + 13.28));
  --kendo-color-on-base: oklch(from var(--kendo-color-base) clamp(0.2836, (0.65 - l) * 99999, 0.95) 0.0243 calc(h + 13.28));
  --kendo-color-primary-hover: oklch(from var(--kendo-color-primary) max(0.15, calc(l + clamp(-0.0922, (0.35 - l) * 99999, 0.0922))) calc(c - 0.0023) calc(h + 2.74));
  --kendo-color-primary-active: oklch(from var(--kendo-color-primary) max(0.20, calc(l + clamp(-0.1640, (0.35 - l) * 99999, 0.1640))) calc(c + 0.0007) calc(h + 8.47));
  --kendo-color-on-primary: oklch(from var(--kendo-color-primary) clamp(0.10, (0.65 - l) * 99999, 1) 0 h);
  --kendo-color-primary-on-surface: color-mix(in oklch, oklch(from var(--kendo-color-primary) l c h) 35%, oklch(from var(--kendo-color-surface) clamp(0, calc((0.5 - l) * 1000), 1) none none) 65%);
  --kendo-color-secondary-hover: oklch(from var(--kendo-color-secondary) max(0.15, calc(l + clamp(-0.0569, (0.35 - l) * 99999, 0.0569))) calc(c - 0.0174) calc(h - 0.42));
  --kendo-color-on-secondary: oklch(from var(--kendo-color-secondary) clamp(0.10, (0.65 - l) * 99999, 1) 0 h);

  --kendo-border-radius-base: 0.375rem;
  --kendo-border-radius-sm: calc(var(--kendo-border-radius-base) * 2 / 3);
  --kendo-border-radius-md: var(--kendo-border-radius-base);
  --kendo-border-radius-xl: calc(var(--kendo-border-radius-base) * 2);
  --kendo-border-radius-xxl: calc(var(--kendo-border-radius-base) * 8 / 3);
  --kendo-border-radius-full: 9999px;
  --kendo-elevation-1: 0 0 4px 1px rgb(56 66 80 / 0.05), 0 4px 6px -2px rgb(56 66 80 / 0.06);
  --kendo-elevation-2: 0 -1px 2px 0 rgb(56 66 80 / 0.03), 0 4px 6px -2px rgb(56 66 80 / 0.02), 0 12px 16px -4px rgb(56 66 80 / 0.08);
  --kendo-font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
  --kendo-transition-rapid: 150ms cubic-bezier(0, 0, 0.58, 1);
  --kendo-transition-bouncy: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  --kendo-transition-snappy: 250ms cubic-bezier(0, 0, 0.58, 1);

  --icon-size: 16px;
  --icon-stroke: 2;
  --row-gap: 8px;
  --chevron-size: 16px;
  --chevron-right: 11px;
  --chevron-color: var(--kendo-color-on-app-surface);

  --name-buttons: "Button · Flat button";
  --name-form: "TextBox · DropDownList · Checkbox";
  --name-switch: "Switch";
  --name-meters: "Slider · ProgressBar";
  --name-tabs: "TabStrip";
  --name-profile: "Card · Avatar · Badge";
  --name-filters: "ChipList · RadioGroup";
  --name-toast: "Notification";
}

:root[data-theme="dark"] {
  --kendo-color-app-surface: oklch(13.85% 0.0249 273.24deg);
  --kendo-color-surface: oklch(23.28% 0.0218 272.75deg);
  --kendo-color-base: oklch(31.71% 0.0286 265.25deg);
  --kendo-color-primary: oklch(86.9% 0.0198 252.89deg);
  --kendo-color-subtle: oklch(89.61% 0.0122 259.82deg);
  --kendo-color-border: oklch(55.85% 0.0301 257.07deg / 0.25);
  --kendo-color-border-alt: oklch(55.85% 0.0301 257.07deg / 0.5);
  --kendo-color-on-app-surface: oklch(from var(--kendo-color-app-surface) clamp(0.05, (0.65 - l) * 99999, 0.951) 0.0063 calc(h - 17.76));
  --kendo-color-surface-alt: oklch(18.03% 0.0232 272.17deg);
  --kendo-color-on-base: oklch(from var(--kendo-color-base) clamp(0.05, (0.65 - l) * 99999, 0.951) 0.0063 calc(h - 9.77));
  --kendo-color-base-on-subtle: oklch(from var(--kendo-color-base-subtle) clamp(0.0703, (0.65 - l) * 99999, 0.9297) 0.0092 calc(h - 14.41));
  --kendo-color-on-primary: oklch(from var(--kendo-color-primary) clamp(0.2107, (0.65 - l) * 99999, 0.7893) 0.0336 calc(h + 12.69));
}

body {
  color: var(--kendo-color-on-app-surface);
  font: 400 16px/1.5 var(--kendo-font-family);
}

:focus-visible {
  outline: 1px solid var(--kendo-color-subtle);
  outline-offset: 1px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid var(--kendo-color-border);
  border-radius: var(--kendo-border-radius-xxl);
  background: var(--kendo-color-surface-alt);
  box-shadow: var(--kendo-elevation-1);
}

.card--flush {
  gap: 0;
  padding: 0;
  overflow: hidden;
}

.title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
}

.meta {
  color: var(--kendo-color-subtle);
  font-size: 0.875rem;
  line-height: 1.4285714286;
}

/* ---------- Buttons ---------- */

.btn {
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--kendo-border-radius-md);
  background: var(--kendo-color-base);
  box-shadow: 0 1px 1px 0 rgb(0 0 0 / 0.16);
  color: var(--kendo-color-on-base);
  line-height: 1.5;
  transition: color var(--kendo-transition-rapid), background-color var(--kendo-transition-rapid), border-color var(--kendo-transition-rapid);
}

.btn:hover {
  background: var(--kendo-color-base-hover);
}

.btn:active,
.btn[aria-pressed="true"] {
  background: var(--kendo-color-base-active);
}

.btn--primary {
  border-color: var(--kendo-color-primary);
  background: var(--kendo-color-primary);
  color: var(--kendo-color-on-primary);
}

.btn--primary:hover {
  border-color: var(--kendo-color-primary-hover);
  background: var(--kendo-color-primary-hover);
}

.btn--primary:active {
  border-color: var(--kendo-color-primary-active);
  background: var(--kendo-color-primary-active);
}

.btn--primary:focus-visible {
  outline-color: var(--kendo-color-primary-on-surface);
}

.btn--ghost,
.icon-btn {
  border-color: transparent;
  background: none;
  box-shadow: none;
  color: inherit;
}

.btn--ghost:hover,
.icon-btn:hover {
  background: color-mix(in srgb, var(--kendo-color-base-hover) 70%, transparent);
}

.icon-btn {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--kendo-border-radius-md);
}

.icon-btn[aria-pressed="true"] {
  color: var(--kendo-color-secondary);
}

.icon-btn[aria-pressed="true"] .icon {
  fill: currentColor;
}

/* ---------- Switch: 60×30, ON/OFF labels in the track, a bouncy thumb ---------- */

.list-row {
  min-height: 38px;
}

.switch {
  width: 60px;
  height: 30px;
  border-radius: var(--kendo-border-radius-full);
  background: var(--kendo-color-base);
  box-shadow: inset 0 0 0 1px var(--kendo-color-border);
  transition: background-color var(--kendo-transition-rapid);
}

.switch::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(26px / 2 + 2px);
  z-index: 1;
  width: 26px;
  height: 26px;
  border-radius: var(--kendo-border-radius-full);
  background: var(--kendo-color-surface-alt);
  box-shadow: 0 0 2px rgb(0 0 0 / 0.16);
  translate: -50% -50%;
  transition: left var(--kendo-transition-snappy);
}

.switch::after {
  content: "OFF";
  position: absolute;
  top: 50%;
  right: 8px;
  color: var(--kendo-color-on-app-surface);
  font-size: 0.75rem;
  line-height: 1;
  text-transform: uppercase;
  translate: 0 -50%;
}

.switch:checked {
  background: var(--kendo-color-secondary);
  box-shadow: none;
}

.switch:checked::before {
  left: calc(100% - 26px / 2 - 2px);
  transition: left var(--kendo-transition-bouncy);
}

.switch:checked::after {
  content: "ON";
  right: auto;
  left: 8px;
  color: var(--kendo-color-on-secondary);
}

/* ---------- TextBox, DropDownList ---------- */

.field {
  gap: 4px;
}

.field__label {
  font-size: 0.875rem;
  line-height: 1.4285714286;
}

.input,
.select select {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--kendo-color-border);
  border-radius: var(--kendo-border-radius-md);
  outline: 0;
  background: var(--kendo-color-surface-alt);
  box-shadow: 0 1px 2px 0 rgb(56 66 80 / 0.05);
  color: var(--kendo-color-on-app-surface);
  line-height: 1.5;
  transition: border-color var(--kendo-transition-rapid);
}

.select select {
  padding-right: 38px;
  box-shadow: none;
}

.input:hover,
.select select:hover,
.input:focus,
.select select:focus {
  border-color: var(--kendo-color-border-alt);
}

/* ---------- Checkbox, radio (18px, filled with the secondary colour) ---------- */

.check {
  gap: 8px;
  min-height: 28px;
}

.checkbox,
.radio {
  width: 18px;
  height: 18px;
  border: 1px solid var(--kendo-color-border);
  background: var(--kendo-color-surface-alt);
  color: var(--kendo-color-on-secondary);
  transition: background-color var(--kendo-transition-rapid), border-color var(--kendo-transition-rapid);
}

.checkbox {
  border-radius: var(--kendo-border-radius-sm);
}

.radio {
  border-radius: 50%;
}

.checkbox:hover,
.radio:hover {
  border-color: var(--kendo-color-border-alt);
}

.checkbox:checked,
.radio:checked {
  border-color: var(--kendo-color-secondary);
  background: var(--kendo-color-secondary);
}

.checkbox:checked::before,
.radio:checked::before {
  content: "";
  position: absolute;
  inset: 0;
  background: currentColor;
}

.checkbox:checked::before {
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='square' stroke-linejoin='square' stroke-width='2' d='M3,8 l3,3 l7-7'/%3e%3c/svg%3e") center / 16px no-repeat;
}

.radio:checked::before {
  mask: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3e%3ccircle cx='50%25' cy='50%25' r='4' fill='%23ffffff'/%3e%3c/svg%3e") center / 14px no-repeat;
}

.group {
  display: grid;
  gap: 2px;
}

.group__label {
  margin-bottom: 4px;
  font-size: 0.875rem;
}

/* ---------- Chips ---------- */

.chip {
  gap: 4px;
  padding: 6px 8px;
  border: 1px solid var(--kendo-color-base-emphasis);
  border-radius: var(--kendo-border-radius-md);
  background: var(--kendo-color-base-subtle);
  color: var(--kendo-color-base-on-subtle);
  line-height: 1;
  transition: background-color var(--kendo-transition-rapid);
}

.chip:hover {
  background: var(--kendo-color-base-subtle-hover);
}

.chip[aria-pressed="true"] {
  background: var(--kendo-color-base-subtle-active);
}

/* ---------- Slider, progress bar ---------- */

.meter {
  gap: 4px;
}

.meter__label {
  font-size: 0.875rem;
}

.slider {
  height: 26px;
}

.slider::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--kendo-border-radius-md);
  background: linear-gradient(to right, var(--kendo-color-secondary) var(--val), var(--kendo-color-base-subtle) var(--val));
}

.slider::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  margin-top: -6px;
  border: 1px solid var(--kendo-color-secondary);
  border-radius: 50%;
  background: var(--kendo-color-secondary);
  -webkit-appearance: none;
}

.slider:hover::-webkit-slider-thumb {
  background: var(--kendo-color-secondary-hover);
}

.slider::-moz-range-track {
  height: 4px;
  border-radius: var(--kendo-border-radius-md);
  background: var(--kendo-color-base-subtle);
}

.slider::-moz-range-progress {
  height: 4px;
  border-radius: var(--kendo-border-radius-md);
  background: var(--kendo-color-secondary);
}

.slider::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border: 1px solid var(--kendo-color-secondary);
  border-radius: 50%;
  background: var(--kendo-color-secondary);
}

.progress {
  height: 22px;
  border-radius: var(--kendo-border-radius-md);
  background: var(--kendo-color-base-subtle);
}

.progress::-webkit-progress-bar {
  border-radius: var(--kendo-border-radius-md);
  background: var(--kendo-color-base-subtle);
}

.progress::-webkit-progress-value {
  background: var(--kendo-color-secondary);
}

.progress::-moz-progress-bar {
  background: var(--kendo-color-secondary);
}

/* ---------- TabStrip ---------- */

.tabs {
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--kendo-color-border);
}

.tab {
  margin-bottom: -1px;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: var(--kendo-border-radius-xl) var(--kendo-border-radius-xl) 0 0;
  background: transparent;
  color: var(--kendo-color-on-app-surface);
  font-size: 1rem;
  line-height: 1.5;
}

.tab:hover {
  color: var(--kendo-color-primary-on-surface);
}

.tab[aria-selected="true"] {
  border-color: var(--kendo-color-border);
  border-bottom-color: var(--kendo-color-surface-alt);
  background: var(--kendo-color-surface-alt);
  color: var(--kendo-color-primary);
}

.tabpanel {
  display: grid;
  gap: 8px;
  padding: 16px;
}

.token__chip {
  border-radius: var(--kendo-border-radius-sm);
  box-shadow: inset 0 0 0 1px var(--kendo-color-border);
}

.token__chip[data-token="primary"] { background: var(--kendo-color-primary); }
.token__chip[data-token="surface"] { background: var(--kendo-color-secondary); }
.token__chip[data-token="outline"] { background: var(--kendo-color-base); }
code[data-token="primary"]::before { content: "--kendo-color-primary"; }
code[data-token="surface"]::before { content: "--kendo-color-secondary"; }
code[data-token="outline"]::before { content: "--kendo-color-base"; }

.type-sample {
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}

[data-type-name]::before {
  content: "Inter · font-size 1rem / 1.5";
}

.shape-sample {
  width: 72px;
  height: 48px;
  border: 1px solid var(--kendo-color-border);
  border-radius: var(--kendo-border-radius-xxl);
  background: var(--kendo-color-surface-alt);
  box-shadow: var(--kendo-elevation-1);
}

[data-shape-name]::before {
  content: "border-radius-base · 0.375rem";
}

/* ---------- Card, avatar, badge ---------- */

.avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--kendo-border-radius-full);
}

.badge {
  min-width: calc(1em + 10px);
  padding: 4px;
  border: 1px solid var(--kendo-color-primary);
  border-radius: var(--kendo-border-radius-md);
  background: var(--kendo-color-primary);
  color: var(--kendo-color-on-primary);
  font-size: 0.75rem;
  line-height: 1;
}

.badge--subtle {
  border-color: var(--kendo-color-base);
  background: var(--kendo-color-base);
  color: var(--kendo-color-on-base);
}

/* ---------- Notification ---------- */

.toast {
  padding: 10px 10px 10px 14px;
  border: 1px solid var(--kendo-color-border);
  border-radius: var(--kendo-border-radius-md);
  background: var(--kendo-color-surface-alt);
  box-shadow: var(--kendo-elevation-2);
  font-size: 0.875rem;
}

.toast__action {
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: var(--kendo-border-radius-md);
  background: none;
  color: var(--kendo-color-secondary);
  font-weight: 500;
}

.toast__action:hover {
  background: color-mix(in srgb, var(--kendo-color-base-hover) 70%, transparent);
}