/* Generated by scripts/build.mjs from tokens/vikingo.tokens.json. Do not edit.
 *
 * Vikingo design system: fonts, custom properties, text and button classes.
 * Keep the dist/ folder structure: the fonts load from ../fonts/.
 */

@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ClashDisplay-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Clash Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ClashDisplay-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/DMMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "DM Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/DMMono-Medium.woff2") format("woff2");
}

:root {
  --vk-color-ink: #3E2E45;
  --vk-color-coral: #FF544D;
  --vk-color-dark-ink: #1A0922;
  --vk-color-mauve: #7A687F;
  --vk-color-light-fill: #F3EEEB;
  --vk-color-light-border: #DCD0C3;
  --vk-color-light-lilac: #ECEAEC;
  --vk-color-white: #FFFFFF;
  --vk-color-coral-hover: #E83D36;
  --vk-color-coral-pressed: #CC2F29;
  --vk-color-light-lilac-hover: #E2DFE2;
  --vk-color-ink-deep: #2A2036;
  --vk-color-lilac: #B5A2BB;
  --vk-color-orange: #F19862;
  --vk-color-green: #DDEF73;
  --vk-color-pink: #DB89D6;
  --vk-color-ink-a10: rgba(62, 46, 69, 0.1);
  --vk-color-ink-a20: rgba(62, 46, 69, 0.2);
  --vk-color-mauve-a20: rgba(122, 104, 127, 0.2);
  --vk-color-white-a20: rgba(255, 255, 255, 0.2);
  --vk-color-white-a40: rgba(255, 255, 255, 0.4);
  --vk-color-placeholder: #9B8FA3;
  --vk-color-control-border: #8E8193;
  --vk-color-white-a80: rgba(255, 255, 255, 0.8);
  --vk-color-coral-a20: rgba(255, 84, 77, 0.2);
  --vk-color-dark-ink-a60: rgba(26, 9, 34, 0.6);
  --vk-topic-design: var(--vk-color-coral);
  --vk-topic-technology: var(--vk-color-lilac);
  --vk-topic-marketing: var(--vk-color-orange);
  --vk-topic-personal-growth: var(--vk-color-green);
  --vk-topic-ai: var(--vk-color-pink);
  --vk-status-error: #DC2626;
  --vk-status-error-hover: #B91C1C;
  --vk-status-error-pressed: #991B1B;
  --vk-status-error-muted: rgba(220, 38, 38, 0.14);
  --vk-status-success: #22C55E;
  --vk-status-success-muted: rgba(34, 197, 94, 0.12);
  --vk-status-warning: #F59E0B;
  --vk-status-warning-muted: rgba(245, 158, 11, 0.12);
  --vk-status-info: #3B82F6;
  --vk-status-info-muted: rgba(59, 130, 246, 0.12);
  --vk-font-display: "Clash Display", system-ui, -apple-system, "Segoe UI", sans-serif;
  --vk-font-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --vk-font-handwriting: "Patrick Hand", cursive;
  --vk-font-weight-regular: 400;
  --vk-font-weight-medium: 500;
  --vk-text-h1-family: var(--vk-font-display);
  --vk-text-h1-weight: 500;
  --vk-text-h1-size: clamp(32px, 27.028px + 1.326vw, 44px);
  --vk-text-h1-line-height: 1.2;
  --vk-text-h1-letter-spacing: 0.04em;
  --vk-text-h2-family: var(--vk-font-display);
  --vk-text-h2-weight: 500;
  --vk-text-h2-size: clamp(32px, 28.685px + 0.884vw, 40px);
  --vk-text-h2-line-height: 1.2;
  --vk-text-h2-letter-spacing: 0.04em;
  --vk-text-h3-family: var(--vk-font-display);
  --vk-text-h3-weight: 500;
  --vk-text-h3-size: 32px;
  --vk-text-h3-line-height: 1.2;
  --vk-text-h3-letter-spacing: 0.04em;
  --vk-text-h4-family: var(--vk-font-display);
  --vk-text-h4-weight: 500;
  --vk-text-h4-size: 24px;
  --vk-text-h4-line-height: 1.3;
  --vk-text-h4-letter-spacing: 0.04em;
  --vk-text-number-family: var(--vk-font-display);
  --vk-text-number-weight: 500;
  --vk-text-number-size: 72px;
  --vk-text-number-line-height: 1.1;
  --vk-text-number-letter-spacing: 0.04em;
  --vk-text-body-l-family: var(--vk-font-display);
  --vk-text-body-l-weight: 500;
  --vk-text-body-l-size: 20px;
  --vk-text-body-l-line-height: 1.5;
  --vk-text-body-l-letter-spacing: 0.04em;
  --vk-text-body-l-paragraph-spacing: 8px;
  --vk-text-body-family: var(--vk-font-display);
  --vk-text-body-weight: 400;
  --vk-text-body-size: 16px;
  --vk-text-body-line-height: 1.5;
  --vk-text-body-letter-spacing: 0.04em;
  --vk-text-body-paragraph-spacing: 8px;
  --vk-text-body-bold-family: var(--vk-font-display);
  --vk-text-body-bold-weight: 500;
  --vk-text-body-bold-size: 16px;
  --vk-text-body-bold-line-height: 1.5;
  --vk-text-body-bold-letter-spacing: 0.04em;
  --vk-text-body-bold-paragraph-spacing: 8px;
  --vk-text-body-s-family: var(--vk-font-display);
  --vk-text-body-s-weight: 400;
  --vk-text-body-s-size: 14px;
  --vk-text-body-s-line-height: 1.5;
  --vk-text-body-s-letter-spacing: 0.04em;
  --vk-text-body-s-paragraph-spacing: 8px;
  --vk-text-subtitle-family: var(--vk-font-mono);
  --vk-text-subtitle-weight: 400;
  --vk-text-subtitle-size: 18px;
  --vk-text-subtitle-line-height: 1.4;
  --vk-text-subtitle-letter-spacing: 0em;
  --vk-text-button-family: var(--vk-font-mono);
  --vk-text-button-weight: 500;
  --vk-text-button-size: 20px;
  --vk-text-button-line-height: 1.3;
  --vk-text-button-letter-spacing: 0em;
  --vk-text-button-s-family: var(--vk-font-mono);
  --vk-text-button-s-weight: 500;
  --vk-text-button-s-size: 16px;
  --vk-text-button-s-line-height: 1.3;
  --vk-text-button-s-letter-spacing: 0em;
  --vk-text-label-family: var(--vk-font-mono);
  --vk-text-label-weight: 500;
  --vk-text-label-size: 12px;
  --vk-text-label-line-height: 1.3;
  --vk-text-label-letter-spacing: 0em;
  --vk-space-4: 4px;
  --vk-space-8: 8px;
  --vk-space-12: 12px;
  --vk-space-16: 16px;
  --vk-space-24: 24px;
  --vk-space-32: 32px;
  --vk-space-40: 40px;
  --vk-space-48: 48px;
  --vk-space-64: 64px;
  --vk-space-80: 80px;
  --vk-space-120: 120px;
  --vk-space-160: 160px;
  --vk-space-240: 240px;
  --vk-radius-4: 4px;
  --vk-radius-8: 8px;
  --vk-radius-40: 40px;
  --vk-border-width-1: 1px;
  --vk-border-width-2: 2px;
  --vk-layout-page: 1440px;
  --vk-layout-container: 1280px;
  --vk-layout-gutter: 80px;
  --vk-layout-gutter-mobile: 32px;
  --vk-layout-section: 120px;
  --vk-layout-section-mobile: 64px;
  --vk-layout-header: 76px;
  --vk-layout-logo-width: 146px;
  --vk-breakpoint-tablet: 1024px;
  --vk-breakpoint-mobile: 767px;
  --vk-motion-duration: 200ms;
  --vk-motion-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --vk-button-radius: var(--vk-radius-40);
  --vk-button-padding-y: var(--vk-space-16);
  --vk-button-padding-x: var(--vk-space-32);
  --vk-button-padding-y-mobile: var(--vk-space-12);
  --vk-button-padding-x-mobile: var(--vk-space-24);
  --vk-button-font-size-mobile: 18px;
  --vk-button-gap: 20px;
  --vk-button-border-width: var(--vk-border-width-1);
  --vk-control-height-md: var(--vk-space-48);
  --vk-control-height-sm: var(--vk-space-40);
  --vk-control-radius: var(--vk-radius-8);
  --vk-control-focus-ring: 3px;
  --vk-highlight-background: var(--vk-color-ink-a20);
  --vk-highlight-radius: var(--vk-radius-4);
  --vk-highlight-height: 24px;
  --vk-pictogram-height: 64px;
  --vk-pictogram-stroke-width: 2px;

  /* Current gutter and section spacing; switch below the tablet breakpoint. */
  --vk-gutter: var(--vk-layout-gutter);
  --vk-section-space: var(--vk-layout-section);
}

@media (max-width: 1024px) {
  :root {
    --vk-gutter: var(--vk-layout-gutter-mobile);
    --vk-section-space: var(--vk-layout-section-mobile);
  }
}

/* Bold is Medium: only 400 and 500 exist, so browsers would fake a 700. */

:where(b, strong) {
  font-weight: var(--vk-font-weight-medium);
}

/* Layout: page container and section spacing (rules/layout.md). */

.vk-container {
  box-sizing: content-box;
  max-width: var(--vk-layout-container);
  margin-inline: auto;
  padding-inline: var(--vk-gutter);
}

.vk-section {
  padding-block: var(--vk-section-space);
}

/* Text styles: the only allowed type sizes (rules/typography.md). */

.vk-text-h1 {
  font-family: var(--vk-text-h1-family);
  font-weight: var(--vk-text-h1-weight);
  font-size: var(--vk-text-h1-size);
  line-height: var(--vk-text-h1-line-height);
  letter-spacing: var(--vk-text-h1-letter-spacing);
  margin: 0;
}

.vk-text-h2 {
  font-family: var(--vk-text-h2-family);
  font-weight: var(--vk-text-h2-weight);
  font-size: var(--vk-text-h2-size);
  line-height: var(--vk-text-h2-line-height);
  letter-spacing: var(--vk-text-h2-letter-spacing);
  margin: 0;
}

.vk-text-h3 {
  font-family: var(--vk-text-h3-family);
  font-weight: var(--vk-text-h3-weight);
  font-size: var(--vk-text-h3-size);
  line-height: var(--vk-text-h3-line-height);
  letter-spacing: var(--vk-text-h3-letter-spacing);
  margin: 0;
}

.vk-text-h4 {
  font-family: var(--vk-text-h4-family);
  font-weight: var(--vk-text-h4-weight);
  font-size: var(--vk-text-h4-size);
  line-height: var(--vk-text-h4-line-height);
  letter-spacing: var(--vk-text-h4-letter-spacing);
  margin: 0;
}

.vk-text-number {
  font-family: var(--vk-text-number-family);
  font-weight: var(--vk-text-number-weight);
  font-size: var(--vk-text-number-size);
  line-height: var(--vk-text-number-line-height);
  letter-spacing: var(--vk-text-number-letter-spacing);
  margin: 0;
}

.vk-text-body-l {
  font-family: var(--vk-text-body-l-family);
  font-weight: var(--vk-text-body-l-weight);
  font-size: var(--vk-text-body-l-size);
  line-height: var(--vk-text-body-l-line-height);
  letter-spacing: var(--vk-text-body-l-letter-spacing);
  margin-block: 0 var(--vk-text-body-l-paragraph-spacing);
}

.vk-text-body {
  font-family: var(--vk-text-body-family);
  font-weight: var(--vk-text-body-weight);
  font-size: var(--vk-text-body-size);
  line-height: var(--vk-text-body-line-height);
  letter-spacing: var(--vk-text-body-letter-spacing);
  margin-block: 0 var(--vk-text-body-paragraph-spacing);
}

.vk-text-body-bold {
  font-family: var(--vk-text-body-bold-family);
  font-weight: var(--vk-text-body-bold-weight);
  font-size: var(--vk-text-body-bold-size);
  line-height: var(--vk-text-body-bold-line-height);
  letter-spacing: var(--vk-text-body-bold-letter-spacing);
  margin-block: 0 var(--vk-text-body-bold-paragraph-spacing);
}

.vk-text-body-s {
  font-family: var(--vk-text-body-s-family);
  font-weight: var(--vk-text-body-s-weight);
  font-size: var(--vk-text-body-s-size);
  line-height: var(--vk-text-body-s-line-height);
  letter-spacing: var(--vk-text-body-s-letter-spacing);
  margin-block: 0 var(--vk-text-body-s-paragraph-spacing);
}

.vk-text-subtitle {
  font-family: var(--vk-text-subtitle-family);
  font-weight: var(--vk-text-subtitle-weight);
  font-size: var(--vk-text-subtitle-size);
  line-height: var(--vk-text-subtitle-line-height);
  letter-spacing: var(--vk-text-subtitle-letter-spacing);
  margin: 0;
}

.vk-text-button {
  font-family: var(--vk-text-button-family);
  font-weight: var(--vk-text-button-weight);
  font-size: var(--vk-text-button-size);
  line-height: var(--vk-text-button-line-height);
  letter-spacing: var(--vk-text-button-letter-spacing);
  margin: 0;
}

.vk-text-button-s {
  font-family: var(--vk-text-button-s-family);
  font-weight: var(--vk-text-button-s-weight);
  font-size: var(--vk-text-button-s-size);
  line-height: var(--vk-text-button-s-line-height);
  letter-spacing: var(--vk-text-button-s-letter-spacing);
  margin: 0;
}

.vk-text-label {
  font-family: var(--vk-text-label-family);
  font-weight: var(--vk-text-label-weight);
  font-size: var(--vk-text-label-size);
  line-height: var(--vk-text-label-line-height);
  letter-spacing: var(--vk-text-label-letter-spacing);
  margin: 0;
}

/* Highlight: "Kiemelt body bold" (rules/typography.md). */

.vk-highlight {
  background-color: var(--vk-highlight-background);
  border-radius: var(--vk-highlight-radius);
  padding-inline: 6px;
  font-weight: var(--vk-text-body-bold-weight);
  line-height: var(--vk-highlight-height);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* Buttons: the Figma "gombok" component with every state (rules/elements.md),
 * plus the app sizes, icon-only, ghost, disabled and danger (rules/ui.md).
 * The design system ships no other component code (decision 2026-10-29). */

.vk-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vk-button-gap);
  padding: var(--vk-button-padding-y) var(--vk-button-padding-x);
  border: var(--vk-button-border-width) solid transparent;
  border-radius: var(--vk-button-radius);
  font-family: var(--vk-text-button-family);
  font-weight: var(--vk-text-button-weight);
  font-size: var(--vk-text-button-size);
  line-height: var(--vk-text-button-line-height);
  letter-spacing: var(--vk-text-button-letter-spacing);
  text-decoration: none;
  white-space: nowrap;
  max-inline-size: 100%;
  min-inline-size: 0;
  cursor: pointer;
  transition-property: background-color, border-color, color;
  transition-duration: var(--vk-motion-duration);
  transition-timing-function: var(--vk-motion-easing);
}

/* Icons: Lucide, 2px stroke, currentColor. :where() keeps this overridable. */
:where(.vk-button) svg {
  flex: none;
  inline-size: var(--vk-space-24);
  block-size: var(--vk-space-24);
}

/* Website size follows the screen: the Figma "Gomb" (16/32px, 20px label) above
 * 1024px, the live vikingo.hu mobile size (12/24px, 18px label) at 1024px and below. */
@media (max-width: 1024px) {
  .vk-button {
    padding: var(--vk-button-padding-y-mobile) var(--vk-button-padding-x-mobile);
    font-size: var(--vk-button-font-size-mobile);
  }

  :where(.vk-button) svg {
    inline-size: 20px;
    block-size: 20px;
  }
}

/* Focus: 2px coral ring 2px outside the pill (the gap keeps it visible on a
 * coral button too). */
.vk-button:focus-visible,
.vk-button.is-focus {
  outline: var(--vk-border-width-2) solid var(--vk-color-coral);
  outline-offset: 2px;
}

/* White outline on dark surfaces (the white variant always sits on one). */
.vk-on-dark .vk-button:focus-visible,
.vk-on-dark .vk-button.is-focus,
.vk-button--white:focus-visible,
.vk-button--white.is-focus {
  outline-color: var(--vk-color-white);
}

.vk-button--coral {
  background-color: var(--vk-color-coral);
  border-color: transparent;
  color: var(--vk-color-white);
}

.vk-button--coral:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--coral.is-hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-coral-hover);
}

.vk-button--coral:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--coral.is-active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-coral-pressed);
}

.vk-button--ink {
  background-color: var(--vk-color-ink-a10);
  border-color: var(--vk-color-ink);
  color: var(--vk-color-ink);
}

.vk-button--ink:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--ink.is-hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-ink);
  color: var(--vk-color-white);
}

.vk-button--ink:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--ink.is-active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-ink-deep);
  border-color: var(--vk-color-ink-deep);
  color: var(--vk-color-white);
}

.vk-button--white {
  background-color: var(--vk-color-white-a20);
  border-color: var(--vk-color-white);
  color: var(--vk-color-white);
}

.vk-button--white:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--white.is-hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-white);
  color: var(--vk-color-ink);
}

.vk-button--white:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--white.is-active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-white-a80);
  border-color: transparent;
  color: var(--vk-color-ink);
}

.vk-button--menu {
  background-color: transparent;
  border-color: var(--vk-color-ink);
  color: var(--vk-color-coral);
  font-size: var(--vk-text-button-s-size);
  line-height: var(--vk-text-button-s-line-height);
}

.vk-button--menu:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--menu.is-hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-ink);
  color: var(--vk-color-white);
}

.vk-button--menu:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--menu.is-active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-ink-deep);
  border-color: var(--vk-color-ink-deep);
  color: var(--vk-color-white);
}

/* App surfaces only. Text button: toolbars, table rows, secondary actions in a dense UI. */
.vk-button--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--vk-color-ink);
}

.vk-button--ghost:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--ghost.is-hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-ink-a10);
}

.vk-button--ghost:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--ghost.is-active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-color-ink-a20);
}

/* App surfaces only. Irreversible actions (delete, revoke), rules/ui.md. */
.vk-button--danger {
  background-color: var(--vk-status-error);
  border-color: transparent;
  color: var(--vk-color-white);
}

.vk-button--danger:hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--danger.is-hover:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-status-error-hover);
}

.vk-button--danger:active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]),
.vk-button--danger.is-active:not(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background-color: var(--vk-status-error-pressed);
}

/* App sizes (rules/ui.md): md 48px (12/24px, the live mobile proportion, a safe
 * touch target) and sm 40px, both with the "Gomb S" label; fields match them.
 * The default .vk-button keeps the responsive website size. */

.vk-button--md,
.vk-button--sm {
  box-sizing: border-box;
  gap: var(--vk-space-8);
  font-family: var(--vk-text-button-s-family);
  font-weight: var(--vk-text-button-s-weight);
  font-size: var(--vk-text-button-s-size);
  line-height: var(--vk-text-button-s-line-height);
  letter-spacing: var(--vk-text-button-s-letter-spacing);
}

.vk-button--md {
  block-size: var(--vk-control-height-md);
  padding: 0 var(--vk-space-24);
}

.vk-button--sm {
  block-size: var(--vk-control-height-sm);
  padding: 0 var(--vk-space-16);
}

.vk-button--ghost.vk-button--md {
  padding-inline: var(--vk-space-16);
}

.vk-button--ghost.vk-button--sm {
  padding-inline: var(--vk-space-12);
}

:where(.vk-button--md, .vk-button--sm) svg {
  inline-size: var(--vk-space-16);
  block-size: var(--vk-space-16);
}

/* Icon-only button: square hit area, pill radius (a circle). Name it with
 * aria-label or a .vk-visually-hidden span. 48px (also with --md), 40px with --sm. */

.vk-button--icon {
  box-sizing: border-box;
  inline-size: var(--vk-space-48);
  block-size: var(--vk-space-48);
  padding: 0;
  gap: 0;
}

.vk-button--icon.vk-button--md {
  inline-size: var(--vk-control-height-md);
  block-size: var(--vk-control-height-md);
  padding: 0;
}

.vk-button--icon.vk-button--sm {
  inline-size: var(--vk-control-height-sm);
  block-size: var(--vk-control-height-sm);
  padding: 0;
}

/* Label: wrap the text in .vk-button__label so a long label truncates with an
 * ellipsis in a narrow container (the button is inline-flex, so the ellipsis
 * needs its own box). Put the full text in title or aria-label if it matters. */

.vk-button__label {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Disabled: native :disabled or aria-disabled="true" (links). No hover (see above).
 * Light lilac fill and placeholder label instead of opacity (stays legible, never
 * looks like a faded primary). On dark surfaces: white 20% fill, white 40% label.
 * A loading button is excluded: it keeps its colours even if it is also disabled. */

.vk-button:disabled:not([aria-busy="true"]),
.vk-button[aria-disabled="true"]:not([aria-busy="true"]) {
  background-color: var(--vk-color-light-lilac);
  border-color: transparent;
  color: var(--vk-color-placeholder);
  cursor: not-allowed;
}

.vk-button--ghost:disabled:not([aria-busy="true"]),
.vk-button--ghost[aria-disabled="true"]:not([aria-busy="true"]) {
  background-color: transparent;
}

.vk-on-dark .vk-button:disabled:not([aria-busy="true"]),
.vk-on-dark .vk-button[aria-disabled="true"]:not([aria-busy="true"]),
.vk-button--white:disabled:not([aria-busy="true"]),
.vk-button--white[aria-disabled="true"]:not([aria-busy="true"]) {
  background-color: var(--vk-color-white-a20);
  color: var(--vk-color-white-a40);
}

/* Loading: aria-busy="true" (plus aria-disabled="true", so focus stays on the
 * button). Full opacity, no hover, progress cursor, the label stays visible
 * and unchanged (rules/ui.md, "Betöltés gombban"). The app must ignore clicks and Enter while it is busy.
 * pointer-events: none is deliberately not used: it would hide the progress
 * cursor and keyboard activation would still go through. */

.vk-button[aria-busy="true"] {
  cursor: progress;
}

/* Spinner: <span class="vk-button__spinner" aria-hidden="true"></span> before
 * the label. A 16px ring in the label colour (white on coral, danger and white,
 * INK on ink and ghost), so it needs no other component code. */

.vk-button__spinner {
  flex: none;
  box-sizing: border-box;
  inline-size: var(--vk-space-16);
  block-size: var(--vk-space-16);
  border: var(--vk-border-width-2) solid currentColor;
  border-block-start-color: transparent;
  border-radius: 50%;
  animation: vk-button-spin 0.8s linear infinite;
}

@keyframes vk-button-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vk-button__spinner {
    animation-duration: 2.4s;
  }
}