/* Knickpoint UI Theme: Skarn  (full component library)
 * =========================================================
 * 「方正之间，尽显温润」— Skarn design language.
 * Spec: references/skarn/DESIGN.md
 *
 * Three principles applied throughout:
 *   1. Absolute right angles   — border-radius is 0 everywhere,
 *      including checkboxes, radios, switches, spinners, "circular" buttons.
 *   2. Diffused softness       — low-saturation traditional pigments,
 *      soft diffused shadows (--skarn-shadow / --skarn-shadow-hover).
 *   3. Ample spacing           — generous padding, 8px rhythm,
 *      control heights 2.75rem (44px) / 2.25rem (36px sm).
 *
 * Priority theme going forward; adwaita (deprecated)/fallback remain selectable.
 *
 * Palette switching: <html data-palette="indigo|bamboo|glaze|ink">
 *   indigo 蓝靛 (default) · bamboo 竹石 · glaze 琉璃 · ink 丹青
 * Light/dark follows prefers-color-scheme (same policy as other themes).
 *
 * All colors reference var(--skarn-*) tokens — no hardcoding (spec §5.1).
 * Focus is the Skarn right-angle ring: box-shadow 0 0 0 1px primary,
 * never the UA's rounded outline (spec §5.5). */

/* ═══════════════════════════════════════════════════════════════════════
 * DESIGN TOKENS — four palettes × light/dark (values from skarn-core.css)
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── 蓝靛 Indigo (default) ── */
[data-theme="skarn-skarn"],
[data-theme="skarn-skarn"][data-palette="indigo"] {
  --skarn-bg: #F7F8FA;
  --skarn-surface: #FFFFFF;
  --skarn-text-main: #1C1D1F;
  --skarn-text-muted: #7A7C82;
  --skarn-border: #E5E7EB;
  --skarn-primary: #22538F;
  --skarn-primary-hover: #193F6E;
  --skarn-secondary: #596B85;
  --skarn-success: #578274;
  --skarn-warning: #B38236;
  --skarn-danger: #9E3D3D;
  --skarn-on-primary: #FFFFFF;
}
[data-theme="skarn-skarn"][data-palette="bamboo"] {
  --skarn-bg: #F8F9F8;
  --skarn-surface: #FFFFFF;
  --skarn-text-main: #1C1E1D;
  --skarn-text-muted: #7A807D;
  --skarn-border: #E6E8E6;
  --skarn-primary: #1E6553;
  --skarn-primary-hover: #164C3F;
  --skarn-secondary: #527067;
  --skarn-success: #7F9C62;
  --skarn-warning: #B87A3D;
  --skarn-danger: #A63A3A;
  --skarn-on-primary: #FFFFFF;
}
[data-theme="skarn-skarn"][data-palette="glaze"] {
  --skarn-bg: #FBF9F7;
  --skarn-surface: #FFFFFF;
  --skarn-text-main: #1F1D1C;
  --skarn-text-muted: #827E7A;
  --skarn-border: #EBE7E4;
  --skarn-primary: #B26D1E;
  --skarn-primary-hover: #8A5212;
  --skarn-secondary: #756554;
  --skarn-success: #6F7E5C;
  --skarn-warning: #C7822E;
  --skarn-danger: #A8432C;
  --skarn-on-primary: #FFFFFF;
}
[data-theme="skarn-skarn"][data-palette="ink"] {
  --skarn-bg: #F2F1EE;
  --skarn-surface: #FFFFFF;
  --skarn-text-main: #141312;
  --skarn-text-muted: #5C5955;
  --skarn-border: #D1CFC9;
  --skarn-primary: #242220;
  --skarn-primary-hover: #000000;
  --skarn-secondary: #63605C;
  --skarn-success: #526156;
  --skarn-warning: #8F764C;
  --skarn-danger: #7A4A45;
  --skarn-on-primary: #FFFFFF;
}

@media (prefers-color-scheme: dark) {
  [data-theme="skarn-skarn"],
  [data-theme="skarn-skarn"][data-palette="indigo"] {
    --skarn-bg: #131416;
    --skarn-surface: #1C1D21;
    --skarn-text-main: #E4E5E8;
    --skarn-text-muted: #868991;
    --skarn-border: #33353A;
    --skarn-primary: #6796D1;
    --skarn-primary-hover: #85ADDF;
    --skarn-secondary: #778A9C;
    --skarn-success: #6A9887;
    --skarn-warning: #D6A252;
    --skarn-danger: #C96666;
    --skarn-on-primary: #0B1624;
  }
  [data-theme="skarn-skarn"][data-palette="bamboo"] {
    --skarn-bg: #131413;
    --skarn-surface: #1C1E1D;
    --skarn-text-main: #E4E6E4;
    --skarn-text-muted: #848A86;
    --skarn-border: #333634;
    --skarn-primary: #5DAA93;
    --skarn-primary-hover: #78BFAB;
    --skarn-secondary: #698B81;
    --skarn-success: #8CA473;
    --skarn-warning: #D99B5B;
    --skarn-danger: #D15E5E;
    --skarn-on-primary: #0A1C16;
  }
  [data-theme="skarn-skarn"][data-palette="glaze"] {
    --skarn-bg: #161514;
    --skarn-surface: #211E1C;
    --skarn-text-main: #E8E5E3;
    --skarn-text-muted: #8F8984;
    --skarn-border: #383431;
    --skarn-primary: #DCA052;
    --skarn-primary-hover: #E8B876;
    --skarn-secondary: #8F8171;
    --skarn-success: #8A9A74;
    --skarn-warning: #E29E4D;
    --skarn-danger: #D6674E;
    --skarn-on-primary: #261605;
  }
  [data-theme="skarn-skarn"][data-palette="ink"] {
    --skarn-bg: #0F0E0D;
    --skarn-surface: #1A1918;
    --skarn-text-main: #EAE8E3;
    --skarn-text-muted: #8F8C87;
    --skarn-border: #3D3B38;
    --skarn-primary: #7B7667;
    --skarn-primary-hover: #8E8878;
    --skarn-secondary: #96938E;
    --skarn-success: #6E8072;
    --skarn-warning: #B59B6F;
    --skarn-danger: #A86B63;
    --skarn-on-primary: #121110;
  }
}

/* ── Shared tokens (palette-independent) ── */
[data-theme="skarn-skarn"] {
  /* 温润弥散阴影 — soft diffused shadows, the core softener */
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --skarn-overlay: rgba(0, 0, 0, 0.4);
  --skarn-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

  /* Typography — 外圆内方: serif display, sans UI, mono code */
  --skarn-font-serif: "Noto Serif CJK SC", "Noto Serif SC", "Songti SC", "SimSun", serif;
  --skarn-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --skarn-font-mono: "JetBrains Mono", "JetBrains Maple Mono", "SF Mono", "Cascadia Code", Consolas, monospace;

  /* Bridge vars consumed by structural CSS */
  --skf-ui-font: var(--skarn-font-sans);
  --skf-ui-font-mono: var(--skarn-font-mono);
  --skf-ui-font-size: 14px;
}
@media (prefers-color-scheme: dark) {
  [data-theme="skarn-skarn"] {
    --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
    --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
    --skarn-overlay: rgba(0, 0, 0, 0.7);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
 * SHARED INTERACTION GRAMMAR
 * ═══════════════════════════════════════════════════════════════════════ */

/* Right-angle focus ring — replaces every UA rounded outline */
[data-theme="skarn-skarn"] :is(.skf-btn, .skf-btn-toggle, .skf-entry, .skf-textarea,
.skf-check, .skf-radio, .skf-switch, .skf-menu-item, .skf-tab, .skf-find-btn,
.skf-find-entry, .skf-math-input, .skf-boxed-list-row, .skf-button-row,
.skf-combo-row, .skf-expander-row):focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
/* Filled controls carry an on-primary ring instead */
[data-theme="skarn-skarn"] :is(.skf-btn.skf-btn-suggested, .skf-math-btn-insert):focus-visible {
  box-shadow: 0 0 0 1px var(--skarn-on-primary);
}

/* UI controls use the sans stack; titles opt into serif individually */
[data-theme="skarn-skarn"] :is(.skf-btn, .skf-btn-toggle, .skf-entry, .skf-textarea,
.skf-menu-item, .skf-tab, .skf-find-btn, .skf-find-entry, .skf-math-input,
.skf-toast, .skf-tooltip, .skf-dialog, .skf-popover, .skf-menu, .skf-badge,
.skf-banner, .skf-view-switcher) {
  font-family: var(--skf-font-stack, var(--skarn-font-sans));
}

/* ═══════════════════════════════════════════════════════════════════════
 * 1. BUTTON
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-btn {
  min-block-size: 2.75rem;
  padding-block: 0; padding-inline: 0.9rem;
  gap: 0.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--skarn-text-main);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-btn:hover {
  color: var(--skarn-primary);
  background: color-mix(in srgb, var(--skarn-primary) 6%, transparent);
}
[data-theme="skarn-skarn"] .skf-btn:active {
  background: color-mix(in srgb, var(--skarn-primary) 12%, transparent);
}
[data-theme="skarn-skarn"] .skf-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Outline variant — 1px border defines the edge (spec §5.5) */
[data-theme="skarn-skarn"] .skf-btn.skf-btn-flat {
  border-color: var(--skarn-border);
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
}
[data-theme="skarn-skarn"] .skf-btn.skf-btn-flat:hover:not(:disabled) {
  border-color: var(--skarn-primary);
  color: var(--skarn-primary);
  box-shadow: var(--skarn-shadow);
}
[data-theme="skarn-skarn"] .skf-btn.skf-btn-flat:active:not(:disabled) {
  background: color-mix(in srgb, var(--skarn-primary) 8%, var(--skarn-surface));
}

/* Suggested action — primary pigment, 点染 */
[data-theme="skarn-skarn"] .skf-btn.skf-btn-suggested {
  background: var(--skarn-primary);
  border-color: var(--skarn-primary);
  color: var(--skarn-on-primary);
}
[data-theme="skarn-skarn"] .skf-btn.skf-btn-suggested:hover:not(:disabled) {
  background: var(--skarn-primary-hover);
  border-color: var(--skarn-primary-hover);
  box-shadow: var(--skarn-shadow);
}

/* Destructive action — 铁红 pigment */
[data-theme="skarn-skarn"] .skf-btn.skf-btn-destructive {
  border-color: color-mix(in srgb, var(--skarn-danger) 45%, transparent);
  background: transparent;
  color: var(--skarn-danger);
}
[data-theme="skarn-skarn"] .skf-btn.skf-btn-destructive:hover:not(:disabled) {
  border-color: var(--skarn-danger);
  background: color-mix(in srgb, var(--skarn-danger) 8%, transparent);
  box-shadow: var(--skarn-shadow);
}

/* Pill / circular / icon variants — Skarn squares them all (绝对直角).
 * "circular" keeps its 34px hit target but loses the roundness. */
[data-theme="skarn-skarn"] .skf-btn.skf-btn-circular {
  min-inline-size: 34px;
  min-block-size: 34px;
  padding: 0;
}
[data-theme="skarn-skarn"] .skf-btn.skf-btn-pill {
  padding-block: 0; padding-inline: 1.5rem;
}
[data-theme="skarn-skarn"] .skf-btn.skf-btn-icon {
  min-inline-size: 2.75rem;
  padding-inline-start: 0;
  padding-inline-end: 0;
  justify-content: center;
}
[data-theme="skarn-skarn"] .skf-btn.skf-btn-text {
  padding-inline-start: 1.1rem;
  padding-inline-end: 1.1rem;
}
[data-theme="skarn-skarn"] .skf-btn.skf-btn-sm { min-block-size: 2.25rem; padding-inline: 0.7rem; font-size: 0.85rem; }
[data-theme="skarn-skarn"] .skf-btn.skf-btn-lg { min-block-size: 3.25rem; padding-inline: 1.1rem; font-size: 1.05rem; }
[data-theme="skarn-skarn"] .skf-btn.skf-btn-text-icon {
  gap: 0.5rem;
}

/* ── Toggle button ─────────────────────────────────────────────────── */
[data-theme="skarn-skarn"] .skf-btn-toggle {
  min-block-size: 2.75rem;
  padding-block: 0; padding-inline: 0.9rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--skarn-text-main);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  line-height: 1;
  cursor: pointer;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-btn-toggle:hover {
  color: var(--skarn-primary);
  background: color-mix(in srgb, var(--skarn-primary) 6%, transparent);
}
/* Checked — primary outline + inset ring, the .is-active grammar */
[data-theme="skarn-skarn"] .skf-btn-toggle.checked {
  border-color: var(--skarn-primary);
  color: var(--skarn-primary);
  box-shadow: inset 0 0 0 1px var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-btn-toggle:disabled { opacity: 0.5; pointer-events: none; }

/* ── Linked group — adjacent borders collapse (-1px), hover lifts ──── */
[data-theme="skarn-skarn"] .skf-linked > *:hover,
[data-theme="skarn-skarn"] .skf-linked > *:focus-visible {
  z-index: 1;
  position: relative;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 2. ENTRY
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-entry {
  min-block-size: 2.75rem;
  padding-block: 0; padding-inline: 0.9rem;
  border: 1px solid var(--skarn-border);
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  caret-color: var(--skarn-primary);
  font-size: inherit;
  transition: var(--skarn-transition);
}
/* Hover previews editability with a dotted primary border (spec §6.1 input) */
[data-theme="skarn-skarn"] .skf-entry:hover:not(:focus):not(:disabled) {
  border: 1px dotted var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-entry:focus-visible {
  border: 1px solid var(--skarn-primary);
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-entry:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

[data-theme="skarn-skarn"] .skf-textarea {
  min-block-size: 80px;
  padding-block: 0.75rem; padding-inline: 0.9rem;
  border: 1px solid var(--skarn-border);
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  caret-color: var(--skarn-primary);
  font-family: var(--skf-font-stack, var(--skarn-font-sans));
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-textarea:hover:not(:focus):not(:disabled) {
  border: 1px dotted var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-textarea:focus-visible {
  border: 1px solid var(--skarn-primary);
  box-shadow: 0 0 0 1px var(--skarn-primary);
}

/* Entry row */
[data-theme="skarn-skarn"] .skf-entry-row { gap: 12px; }
[data-theme="skarn-skarn"] .skf-entry-row-label { min-inline-size: 96px; font-weight: 600; }

/* ═══════════════════════════════════════════════════════════════════════
 * 3. CHECKBOX & RADIO — square everything (绝对直角)
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-check,
[data-theme="skarn-skarn"] .skf-radio {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

/* Box — 18×18 square, surface + hairline (reference 1:1) */
[data-theme="skarn-skarn"] .skf-check-icon,
[data-theme="skarn-skarn"] .skf-radio-icon {
  position: relative;
  flex-shrink: 0;
  inline-size: 18px;
  block-size: 18px;
  border: 1px solid var(--skarn-border);
  border-radius: 0;
  background-color: var(--skarn-surface);
  transition: var(--skarn-transition);
}
/* Hover: box swells (applies to checked too — only disabled is excluded);
 * the spring curve lives ONLY on the hover rule so the release rebounds
 * and moving the mouse away does not overshoot. */
[data-theme="skarn-skarn"] .skf-check:hover .skf-check-icon,
[data-theme="skarn-skarn"] .skf-radio:hover .skf-radio-icon {
  transform: scale(1.06);
  transition: var(--skarn-transition), transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Radio inner marker */
[data-theme="skarn-skarn"] .skf-radio-icon::after {
  content: "";
  position: absolute;
  inset: 4px;
  background-color: var(--skarn-on-primary);
  opacity: 0;
  transition: var(--skarn-transition);
}
/* Hover: the inner marker grows MORE than the box (checked included) */
[data-theme="skarn-skarn"] .skf-radio:hover .skf-radio-icon::after {
  transform: scale(1.4);
}
/* Checked: primary fill */
[data-theme="skarn-skarn"] .skf-check.checked .skf-check-icon,
[data-theme="skarn-skarn"] .skf-radio.checked .skf-radio-icon {
  background-color: var(--skarn-primary);
  border-color: var(--skarn-primary);
}
/* Tick colour — the SVG stroke draw itself lives in skf-base.css */
[data-theme="skarn-skarn"] .skf-check-mark { color: var(--skarn-on-primary); }
/* Radio checked: inner block inset pop (8 → 2 → 4px, overshoot) */
[data-theme="skarn-skarn"] .skf-radio.checked .skf-radio-icon::after {
  opacity: 1;
  animation: skf-radio-inset 0.3s;
}
/* Press recoil — on the label so re-clicking a checked item still reacts */
[data-theme="skarn-skarn"] .skf-check:active .skf-check-icon,
[data-theme="skarn-skarn"] .skf-radio:active .skf-radio-icon {
  transform: scale(0.82);
  animation: skf-pop 0.3s both;
}
[data-theme="skarn-skarn"] .skf-radio:active .skf-radio-icon::after { transform: none; }
[data-theme="skarn-skarn"] .skf-check:focus-visible .skf-check-icon,
[data-theme="skarn-skarn"] .skf-radio:focus-visible .skf-radio-icon {
  box-shadow: 0 0 0 1px var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-check-label,
[data-theme="skarn-skarn"] .skf-radio-label {
  margin-inline-start: 0.6rem;
  font-size: 0.9rem;
  color: var(--skarn-text-main);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 4. SWITCH — rectangular trough, square knob
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
[data-theme="skarn-skarn"] .skf-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 1px var(--skarn-primary);
}

/* Track — 44×24 square trough (reference 1:1) */
[data-theme="skarn-skarn"] .skf-switch-slider {
  position: relative;
  flex: none;
  inline-size: 44px;
  block-size: 24px;
  border: 1px solid var(--skarn-border);
  background-color: var(--skarn-border);
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-switch-slider::after {
  inset-block-start: 2px;
  inset-inline-start: 2px;
  inline-size: 18px;
  block-size: 18px;
  background-color: var(--skarn-switch-knob, var(--skarn-surface));
  box-shadow: var(--skarn-shadow);
  transition: inset-inline-start 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-theme="skarn-skarn"] .skf-switch.checked .skf-switch-slider {
  background-color: var(--skarn-primary);
  border-color: var(--skarn-primary);
}
/* Knob to the logical inline-end: padding box 42 − 2 − 18 = 22 => 100% − 20px */
[data-theme="skarn-skarn"] .skf-switch.checked .skf-switch-slider::after {
  inset-inline-start: calc(100% - 20px);
}
[data-theme="skarn-skarn"] .skf-switch.checked { --skarn-switch-knob: var(--skarn-surface); }
[data-theme="skarn-skarn"] .skf-switch-label {
  margin-inline-start: 0.6rem;
  font-size: 0.9rem;
  color: var(--skarn-text-main);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 5. CARD & BOXED LIST
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-card {
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow);
  padding: 2rem; /* 留白艺术 — card-level breathing room */
  transition: var(--skarn-transition);
}
/* Large-container hover: border responds + inset ring thickens inward only */
[data-theme="skarn-skarn"] .skf-card:hover {
  border-color: var(--skarn-primary);
  box-shadow: var(--skarn-shadow-hover), inset 0 0 0 1px var(--skarn-primary);
}

[data-theme="skarn-skarn"] .skf-boxed-list {
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow);
  overflow: hidden;
}
[data-theme="skarn-skarn"] .skf-boxed-list-row {
  min-block-size: 48px;
  padding-block: 8px; padding-inline: 16px;
  border-block-end: 1px solid var(--skarn-border);
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-boxed-list-row:last-child { border-block-end: none; }
[data-theme="skarn-skarn"] .skf-boxed-list-row:hover {
  background: color-mix(in srgb, var(--skarn-primary) 5%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 6. TYPOGRAPHY — titles carry the serif voice (外圆内方)
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] :is(.skf-title-1, .skf-title-2, .skf-title-3, .skf-title-4) {
  font-family: var(--skarn-font-serif);
  font-weight: 600;
  line-height: 1.45;
  color: var(--skarn-text-main);
}
[data-theme="skarn-skarn"] .skf-title-1 { font-size: 200%; }
[data-theme="skarn-skarn"] .skf-title-2 { font-size: 160%; }
[data-theme="skarn-skarn"] .skf-title-3 { font-size: 136%; }
[data-theme="skarn-skarn"] .skf-title-4 { font-size: 118%; }
[data-theme="skarn-skarn"] .skf-heading  { font-weight: 600; }
[data-theme="skarn-skarn"] .skf-body     { font-weight: 400; line-height: 1.6; }
[data-theme="skarn-skarn"] .skf-caption-heading { font-weight: 600; font-size: 82%; }
[data-theme="skarn-skarn"] .skf-caption  { font-weight: 400; font-size: 82%; line-height: 1.6; color: var(--skarn-text-muted); }

[data-theme="skarn-skarn"] .skf-label-dim     { opacity: 0.62; }
[data-theme="skarn-skarn"] .skf-label-accent  { color: var(--skarn-primary); }
[data-theme="skarn-skarn"] .skf-label-error   { color: var(--skarn-danger); }   /* 铁红 */
[data-theme="skarn-skarn"] .skf-label-warning { color: var(--skarn-warning); }  /* 铜金 */
[data-theme="skarn-skarn"] .skf-label-success { color: var(--skarn-success); }  /* 竹青 */
[data-theme="skarn-skarn"] .skf-monospace     { font-family: var(--skarn-font-mono); }
[data-theme="skarn-skarn"] .skf-numeric       { font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════
 * 7. MENU / POPOVER
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-menu-backdrop { background: transparent; }

[data-theme="skarn-skarn"] .skf-menu {
  min-inline-size: 160px;
  padding: 8px;
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow-hover);
}

[data-theme="skarn-skarn"] .skf-menu-item {
  min-block-size: 40px;
  padding-block: 0; padding-inline: 12px;
  gap: 8px;
  background: transparent;
  color: inherit;
  font-size: 0.95rem;
  letter-spacing: normal;
  cursor: pointer;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-menu-item:hover,
[data-theme="skarn-skarn"] .skf-menu-item.selected {
  color: var(--skarn-primary);
  background: color-mix(in srgb, var(--skarn-primary) 7%, transparent);
}
[data-theme="skarn-skarn"] .skf-menu-item.danger,
[data-theme="skarn-skarn"] .skf-menu-item.skf-menu-item-danger {
  color: var(--skarn-danger);
}
[data-theme="skarn-skarn"] .skf-menu-item.danger:hover,
[data-theme="skarn-skarn"] .skf-menu-item.skf-menu-item-danger:hover {
  background: color-mix(in srgb, var(--skarn-danger) 8%, transparent);
}
[data-theme="skarn-skarn"] .skf-menu-item:disabled { opacity: 0.5; pointer-events: none; }

[data-theme="skarn-skarn"] .skf-menu-separator {
  block-size: 1px;
  margin-block: 8px; margin-inline: 0;
  background: var(--skarn-border);
}

[data-theme="skarn-skarn"] .skf-popover {
  padding: 16px;
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow-hover);
  font-size: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 8. DIALOG
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-dialog-backdrop {
  background: var(--skarn-overlay);
}

[data-theme="skarn-skarn"] .skf-dialog {
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow-hover);
  font-size: var(--skf-ui-font-size);
}

/* Serif voice for the dialog title — 书卷气 */
[data-theme="skarn-skarn"] .skf-dialog-header {
  padding-block: 24px 0; padding-inline: 24px;
  font-family: var(--skarn-font-serif);
  font-weight: 600;
  font-size: 118%;
  letter-spacing: normal;
}
[data-theme="skarn-skarn"] .skf-dialog-body { padding-block: 16px; padding-inline: 24px; }
[data-theme="skarn-skarn"] .skf-dialog-footer { padding-block: 0 24px; padding-inline: 24px; gap: 12px; }

/* ═══════════════════════════════════════════════════════════════════════
 * 9. TOOLTIP — ink-on-paper inversion, square
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-tooltip {
  padding-block: 6px; padding-inline: 12px;
  background: var(--skarn-text-main);
  border: none;
  color: var(--skarn-bg);
  font-size: 82%;
  box-shadow: var(--skarn-shadow-hover);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 10. TOAST — matches .skarn-toast exactly
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-toast {
  max-inline-size: 320px;
  padding-block: 12px; padding-inline: 16px;
  gap: 12px;
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow-hover);
  font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 11. PROGRESS BAR — rectangular trough, primary fill
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-progress {
  min-inline-size: 150px;
  block-size: 6px;
  background: color-mix(in srgb, var(--skarn-border) 55%, var(--skarn-surface));
  overflow: hidden;
}
[data-theme="skarn-skarn"] .skf-progress-bar {
  min-block-size: 6px;
  background: var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-progress:disabled { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════════════
 * 12. SPINNER — square stroke frame (spec §2.2: 加载圈也是直角)
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-spinner {
  min-inline-size: 20px;
  min-block-size: 20px;
  animation: kp-skarn-spin 0.9s linear infinite;
}
[data-theme="skarn-skarn"] .skf-spinner::after {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  border: 3px solid var(--skarn-primary); /* no radius — the whole square frame rotates */
}
@keyframes kp-skarn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  [data-theme="skarn-skarn"] .skf-spinner { animation-duration: 2s; }
}
[data-theme="skarn-skarn"] .skf-spinner:disabled { opacity: 0.5; }

/* ═══════════════════════════════════════════════════════════════════════
 * 13. TAB BAR — underline tabs (.skarn-tabs grammar)
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-tab-bar {
  gap: 0;
  background: var(--skarn-bg);
  color: var(--skarn-text-main);
  border-block-end: 1px solid var(--skarn-border);
}

[data-theme="skarn-skarn"] .skf-tab {
  min-block-size: 40px;
  padding-block: 8px; padding-inline: 4px;
  margin-block-end: -1px;
  border-block-end: 2px solid transparent;
  background: transparent;
  color: var(--skarn-text-muted);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-tab:hover {
  color: var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-tab.active {
  color: var(--skarn-primary);
  border-block-end-color: var(--skarn-primary); /* 激活下划线点染 */
}
[data-theme="skarn-skarn"] .skf-tab-close-btn {
  min-inline-size: 20px;
  min-block-size: 20px;
  padding: 0;
  margin-inline-start: 8px;
  border: none;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-tab-close-btn:hover { color: var(--skarn-danger); }

/* ═══════════════════════════════════════════════════════════════════════
 * 14. VIEW SWITCHER — segmented group, checked = primary inset ring
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-view-switcher {
  gap: 0;
  min-block-size: 2.75rem;
  background: transparent;
  padding: 0;
}
[data-theme="skarn-skarn"] .skf-view-switcher .skf-btn-toggle {
  min-block-size: 2.75rem;
  border: 1px solid var(--skarn-border);
  background: var(--skarn-surface);
  color: var(--skarn-text-muted);
}
[data-theme="skarn-skarn"] .skf-view-switcher .skf-btn-toggle + .skf-btn-toggle {
  margin-inline-start: -1px; /* shared border */
}
[data-theme="skarn-skarn"] .skf-view-switcher .skf-btn-toggle:hover {
  color: var(--skarn-primary);
  position: relative;
  z-index: 1;
}
[data-theme="skarn-skarn"] .skf-view-switcher .skf-btn-toggle.checked {
  border-color: var(--skarn-primary);
  color: var(--skarn-primary);
  background: var(--skarn-surface);
  box-shadow: inset 0 0 0 1px var(--skarn-primary);
  position: relative;
  z-index: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 15. BADGE — square pigment chip
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-badge {
  min-inline-size: 14px;
  min-block-size: 14px;
  padding-block: 1px; padding-inline: 5px;
  background: var(--skarn-secondary);
  color: #FFFFFF;
  font-size: 0.65rem;
  font-weight: 600;
  line-height: 1.2;
}
[data-theme="skarn-skarn"] .skf-badge.skf-badge-accent {
  background: var(--skarn-primary);
  color: var(--skarn-on-primary);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 16. BANNER — soft tinted strip with a primary leading edge
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-banner {
  padding-block: 10px; padding-inline: 16px;
  gap: 12px;
  background: color-mix(in srgb, var(--skarn-primary) 6%, var(--skarn-surface));
  border-block-end: 1px solid var(--skarn-border);
  border-inline-start: 3px solid var(--skarn-primary); /* pigment column (logical edge) */
  color: var(--skarn-text-main);
  font-size: 0.95rem;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 17. EXPANDER ROW
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-expander-row {
  cursor: pointer;
}
[data-theme="skarn-skarn"] .skf-expander-row-header {
  min-block-size: 48px;
  padding-block: 8px; padding-inline: 16px;
  gap: 12px;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-expander-row-header:hover {
  background: color-mix(in srgb, var(--skarn-primary) 5%, transparent);
}
[data-theme="skarn-skarn"] .skf-expander-row-arrow {
  min-inline-size: 16px;
  min-block-size: 16px;
  color: var(--skarn-text-muted);
  transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), color var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-expander-row.expanded .skf-expander-row-arrow {
  color: var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-expander-row-body {
  padding-block: 8px; padding-inline: 16px;
  background: color-mix(in srgb, var(--skarn-border) 30%, var(--skarn-surface));
}

/* ═══════════════════════════════════════════════════════════════════════
 * 18. BUTTON ROW
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-button-row {
  min-block-size: 44px;
  padding-block: 0; padding-inline: 16px;
  gap: 12px;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-button-row:hover {
  background: color-mix(in srgb, var(--skarn-primary) 5%, transparent);
}
[data-theme="skarn-skarn"] .skf-button-row .skf-button-row-icon { min-inline-size: 20px; min-block-size: 20px; }

/* ═══════════════════════════════════════════════════════════════════════
 * 19. COMBO ROW
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-combo-row {
  min-block-size: 48px;
  padding-block: 8px; padding-inline: 16px;
  gap: 12px;
  cursor: pointer;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-combo-row:hover {
  background: color-mix(in srgb, var(--skarn-primary) 5%, transparent);
}
[data-theme="skarn-skarn"] .skf-combo-row-arrow {
  min-inline-size: 16px;
  min-block-size: 16px;
  color: var(--skarn-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 20. FIND BAR — compact sm-scale controls (36px), square
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-find-bar {
  gap: 6px;
  max-inline-size: calc(100vw - 16px);
  padding: 8px;
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow-hover); /* 弹层用 hover 级阴影 (spec §2.3) */
  font-size: var(--skf-ui-font-size);
}
[data-theme="skarn-skarn"] .skf-find-bar-row { gap: 6px; }

[data-theme="skarn-skarn"] .skf-find-entry {
  min-block-size: 36px; /* skarn --sm control height */
  padding-block: 0; padding-inline: 10px;
  border: 1px solid var(--skarn-border);
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  caret-color: var(--skarn-primary);
  font-family: inherit;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-find-entry:hover:not(:focus) {
  border: 1px dotted var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-find-entry:focus-visible {
  border: 1px solid var(--skarn-primary);
  box-shadow: 0 0 0 1px var(--skarn-primary);
  outline: none;
}
/* WebKit search-input chrome would round the corners — strip it */
[data-theme="skarn-skarn"] .skf-find-entry[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}

[data-theme="skarn-skarn"] .skf-find-btn {
  min-inline-size: 24px;
  min-block-size: 24px;
  padding-block: 4px; padding-inline: 8px;
  border: none;
  background: transparent;
  color: var(--skarn-text-muted);
  font-weight: 500;
  letter-spacing: normal;
  cursor: pointer;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-find-btn:hover {
  color: var(--skarn-primary);
  background: color-mix(in srgb, var(--skarn-primary) 7%, transparent);
}
[data-theme="skarn-skarn"] .skf-find-btn.skf-find-toggle.checked {
  color: var(--skarn-primary);
  box-shadow: inset 0 0 0 1px var(--skarn-primary);
}
/* "circular" keeps its hit target but is squared — Skarn has no rounds */
[data-theme="skarn-skarn"] .skf-find-btn.skf-find-circular {
  min-inline-size: 36px;
  min-block-size: 36px;
  padding: 0;
  border: 1px solid transparent;
}
[data-theme="skarn-skarn"] .skf-find-btn.skf-find-circular:hover {
  border-color: var(--skarn-border);
}
[data-theme="skarn-skarn"] .skf-find-count {
  min-inline-size: 40px;
  padding-block: 0; padding-inline: 2px;
  color: var(--skarn-text-muted);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
[data-theme="skarn-skarn"] .skf-find-separator {
  inline-size: 1px;
  block-size: 18px;
  margin-block: 0; margin-inline: 2px;
  background: var(--skarn-border);
}
[data-theme="skarn-skarn"] .skf-find-highlight-current {
  background: color-mix(in srgb, var(--skarn-primary) 45%, transparent);
  color: inherit;
}
[data-theme="skarn-skarn"] .skf-find-highlight {
  background: color-mix(in srgb, var(--skarn-primary) 25%, transparent);
  color: inherit;
}

/* ═══════════════════════════════════════════════════════════════════════
 * 21. MATH POPOVER
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] .skf-math-popover {
  padding: 8px;
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  border: 1px solid var(--skarn-border);
  box-shadow: var(--skarn-shadow-hover);
  font-size: var(--skf-ui-font-size);
}
[data-theme="skarn-skarn"] .skf-math-popover-row { gap: 6px; }
[data-theme="skarn-skarn"] .skf-math-prefix { color: var(--skarn-text-muted); }

[data-theme="skarn-skarn"] .skf-math-input {
  padding-block: 0; padding-inline: 10px;
  border: 1px solid var(--skarn-border);
  background: var(--skarn-surface);
  color: var(--skarn-text-main);
  caret-color: var(--skarn-primary);
  font-family: var(--skarn-font-mono);
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-math-input:hover:not(:focus) {
  border: 1px dotted var(--skarn-primary);
}
[data-theme="skarn-skarn"] .skf-math-input:focus-visible {
  border: 1px solid var(--skarn-primary);
  box-shadow: 0 0 0 1px var(--skarn-primary);
  outline: none;
}

[data-theme="skarn-skarn"] .skf-math-preview {
  min-block-size: 48px;
  padding: 12px;
  background: color-mix(in srgb, var(--skarn-border) 25%, var(--skarn-surface));
  border-block-start: 1px solid var(--skarn-border);
  font-size: 1.15em;
}

/* Insert — primary pigment square; Cancel — quiet ghost square */
[data-theme="skarn-skarn"] .skf-math-btn-insert,
[data-theme="skarn-skarn"] .skf-math-btn-cancel {
  min-inline-size: 36px;
  min-block-size: 36px;
  padding: 0;
  font-size: 15px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  transition: var(--skarn-transition);
}
[data-theme="skarn-skarn"] .skf-math-btn-insert {
  background: var(--skarn-primary);
  color: var(--skarn-on-primary);
}
[data-theme="skarn-skarn"] .skf-math-btn-insert:hover {
  background: var(--skarn-primary-hover);
  box-shadow: var(--skarn-shadow);
}
[data-theme="skarn-skarn"] .skf-math-btn-cancel {
  background: transparent;
  color: var(--skarn-text-muted);
}
[data-theme="skarn-skarn"] .skf-math-btn-cancel:hover {
  color: var(--skarn-danger);
  background: color-mix(in srgb, var(--skarn-danger) 8%, transparent);
}

/* ═══════════════════════════════════════════════════════════════════════
 * 22. SHELL BRIDGE — supplies the theme-neutral --sh-* contract consumed
 * by the application chrome (styles/shell.css). Values alias the Skarn
 * palette so palette switching (data-palette) restyles the whole app.
 * ═══════════════════════════════════════════════════════════════════════ */

[data-theme="skarn-skarn"] {
  --sh-bg: var(--skarn-bg);
  --sh-surface: var(--skarn-surface);
  --sh-track: color-mix(in srgb, var(--skarn-text-main) 5%, var(--skarn-bg));
  --sh-fg: var(--skarn-text-main);
  --sh-muted: var(--skarn-text-muted);
  --sh-hairline: var(--skarn-border);
  --sh-accent: var(--skarn-primary);
  --sh-on-accent: var(--skarn-on-primary);
  --sh-hover: color-mix(in srgb, var(--skarn-primary) 7%, transparent);
  --sh-active: color-mix(in srgb, var(--skarn-primary) 13%, transparent);
  --sh-danger: var(--skarn-danger);
  --sh-accent-hover: var(--skarn-primary-hover);
  --sh-secondary: var(--skarn-secondary);
  --sh-success: var(--skarn-success);
  --sh-warning: var(--skarn-warning);
  --sh-shadow: var(--skarn-shadow);
  --sh-overlay: var(--skarn-overlay);
  --sh-shadow-float: var(--skarn-shadow-hover);
  --sh-motion: var(--skarn-transition);
  --sh-radius: 0px;
  --sh-font: var(--skarn-font-sans);
  --sh-font-display: var(--skarn-font-serif);
  --sh-font-mono: var(--skarn-font-mono);
}


/* ── Scheme override hooks (data-kp-scheme). Applies to EVERY palette so a
 * manual light/dark choice on <html> is honoured even with an explicit
 * palette (the gallery's scheme switcher relies on this). ── */
[data-theme="skarn-skarn"][data-kp-scheme="dark"]:not([data-palette]),
[data-theme="skarn-skarn"][data-palette="indigo"][data-kp-scheme="dark"] {
  --skarn-bg: #131416; --skarn-surface: #1C1D21; --skarn-text-main: #E4E5E8;
  --skarn-text-muted: #868991; --skarn-border: #33353A; --skarn-primary: #6796D1;
  --skarn-primary-hover: #85ADDF; --skarn-secondary: #778A9C; --skarn-success: #6A9887;
  --skarn-warning: #D6A252; --skarn-danger: #C96666; --skarn-on-primary: #0B1624;
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
  --skarn-overlay: rgba(0, 0, 0, 0.7);
}
[data-theme="skarn-skarn"][data-palette="bamboo"][data-kp-scheme="dark"] {
  --skarn-bg: #131413; --skarn-surface: #1C1E1D; --skarn-text-main: #E4E6E4;
  --skarn-text-muted: #848A86; --skarn-border: #333634; --skarn-primary: #5DAA93;
  --skarn-primary-hover: #78BFAB; --skarn-secondary: #698B81; --skarn-success: #8CA473;
  --skarn-warning: #D99B5B; --skarn-danger: #D15E5E; --skarn-on-primary: #0A1C16;
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
  --skarn-overlay: rgba(0, 0, 0, 0.7);
}
[data-theme="skarn-skarn"][data-palette="glaze"][data-kp-scheme="dark"] {
  --skarn-bg: #161514; --skarn-surface: #211E1C; --skarn-text-main: #E8E5E3;
  --skarn-text-muted: #8F8984; --skarn-border: #383431; --skarn-primary: #DCA052;
  --skarn-primary-hover: #E8B876; --skarn-secondary: #8F8171; --skarn-success: #8A9A74;
  --skarn-warning: #E29E4D; --skarn-danger: #D6674E; --skarn-on-primary: #261605;
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
  --skarn-overlay: rgba(0, 0, 0, 0.7);
}
[data-theme="skarn-skarn"][data-palette="ink"][data-kp-scheme="dark"] {
  --skarn-bg: #0F0E0D; --skarn-surface: #1A1918; --skarn-text-main: #EAE8E3;
  --skarn-text-muted: #8F8C87; --skarn-border: #3D3B38; --skarn-primary: #7B7667;
  --skarn-primary-hover: #8E8878; --skarn-secondary: #96938E; --skarn-success: #6E8072;
  --skarn-warning: #B59B6F; --skarn-danger: #A86B63; --skarn-on-primary: #121110;
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.6);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.8);
  --skarn-overlay: rgba(0, 0, 0, 0.7);
}
[data-theme="skarn-skarn"][data-kp-scheme="light"]:not([data-palette]),
[data-theme="skarn-skarn"][data-palette="indigo"][data-kp-scheme="light"] {
  --skarn-bg: #F7F8FA; --skarn-surface: #FFFFFF; --skarn-text-main: #1C1D1F;
  --skarn-text-muted: #7A7C82; --skarn-border: #E5E7EB; --skarn-primary: #22538F;
  --skarn-primary-hover: #193F6E; --skarn-secondary: #596B85; --skarn-success: #578274;
  --skarn-warning: #B38236; --skarn-danger: #9E3D3D; --skarn-on-primary: #FFFFFF;
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --skarn-overlay: rgba(0, 0, 0, 0.4);
}
[data-theme="skarn-skarn"][data-palette="bamboo"][data-kp-scheme="light"] {
  --skarn-bg: #F8F9F8; --skarn-surface: #FFFFFF; --skarn-text-main: #1C1E1D;
  --skarn-text-muted: #7A807D; --skarn-border: #E6E8E6; --skarn-primary: #1E6553;
  --skarn-primary-hover: #164C3F; --skarn-secondary: #527067; --skarn-success: #7F9C62;
  --skarn-warning: #B87A3D; --skarn-danger: #A63A3A; --skarn-on-primary: #FFFFFF;
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --skarn-overlay: rgba(0, 0, 0, 0.4);
}
[data-theme="skarn-skarn"][data-palette="glaze"][data-kp-scheme="light"] {
  --skarn-bg: #FBF9F7; --skarn-surface: #FFFFFF; --skarn-text-main: #1F1D1C;
  --skarn-text-muted: #827E7A; --skarn-border: #EBE7E4; --skarn-primary: #B26D1E;
  --skarn-primary-hover: #8A5212; --skarn-secondary: #756554; --skarn-success: #6F7E5C;
  --skarn-warning: #C7822E; --skarn-danger: #A8432C; --skarn-on-primary: #FFFFFF;
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --skarn-overlay: rgba(0, 0, 0, 0.4);
}
[data-theme="skarn-skarn"][data-palette="ink"][data-kp-scheme="light"] {
  --skarn-bg: #F2F1EE; --skarn-surface: #FFFFFF; --skarn-text-main: #141312;
  --skarn-text-muted: #5C5955; --skarn-border: #D1CFC9; --skarn-primary: #242220;
  --skarn-primary-hover: #000000; --skarn-secondary: #63605C; --skarn-success: #526156;
  --skarn-warning: #8F764C; --skarn-danger: #7A4A45; --skarn-on-primary: #FFFFFF;
  --skarn-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.04), 0 4px 8px -2px rgba(0, 0, 0, 0.02);
  --skarn-shadow-hover: 0 12px 32px -4px rgba(0, 0, 0, 0.08), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --skarn-overlay: rgba(0, 0, 0, 0.4);
}