.perko-platform-ready {
  font-family: var(--pk-font-family-sans);
}

.pk-surface {
  background: var(--pk-color-bg-surface);
  color: var(--pk-color-text-primary);
}

.pk-panel {
  background: var(--pk-color-bg-surface-subtle);
  border: 1px solid var(--pk-color-border-default);
  border-radius: var(--pk-radius-xl);
  padding: var(--pk-space-5);
}

.pk-glass {
  background: var(--pk-glass-tint-top), var(--pk-glass-bg);
  border: 1px solid var(--pk-glass-border);
  box-shadow: var(--pk-glass-shadow);
  backdrop-filter: blur(var(--pk-glass-blur)) saturate(var(--pk-glass-saturation));
}

.pk-button {
  align-items: center;
  border: 1px solid var(--pk-color-border-default);
  border-radius: var(--pk-radius-md);
  cursor: pointer;
  display: inline-flex;
  font-weight: var(--pk-font-weight-medium);
  gap: var(--pk-space-2);
  justify-content: center;
  min-height: 2.75rem;
  padding: 0 var(--pk-space-4);
  transition: background-color var(--pk-motion-normal) var(--pk-ease-standard),
    border-color var(--pk-motion-normal) var(--pk-ease-standard),
    transform var(--pk-motion-fast) var(--pk-ease-standard);
}

.pk-button:hover {
  transform: translateY(-1px);
}

.pk-button:focus-visible {
  border-color: var(--pk-color-border-focus);
  box-shadow: var(--pk-shadow-focus);
  outline: none;
}

.pk-button--primary {
  background: var(--pk-color-action-primary);
  color: var(--pk-color-action-primary-text);
}

.pk-button--secondary {
  background: var(--pk-color-action-secondary);
  color: var(--pk-color-action-secondary-text);
}

.pk-status {
  align-items: center;
  border-radius: var(--pk-radius-round);
  display: inline-flex;
  font-size: var(--pk-font-size-sm);
  font-weight: var(--pk-font-weight-medium);
  gap: var(--pk-space-1);
  line-height: 1;
  padding: var(--pk-space-2) var(--pk-space-3);
  white-space: nowrap;
}

.pk-status--success {
  background: var(--pk-color-status-success-bg);
  color: var(--pk-color-status-success-text);
}

.pk-status--info {
  background: var(--pk-color-status-info-bg);
  color: var(--pk-color-status-info-text);
}

.pk-status--warning {
  background: var(--pk-color-status-warning-bg);
  color: var(--pk-color-status-warning-text);
}

.pk-status--danger {
  background: var(--pk-color-status-danger-bg);
  color: var(--pk-color-status-danger-text);
}

.pk-status--neutral {
  background: var(--pk-color-status-neutral-bg);
  color: var(--pk-color-status-neutral-text);
}

.pk-field {
  display: grid;
  gap: var(--pk-space-2);
}

.pk-field label {
  color: var(--pk-color-text-tertiary);
  font-size: var(--pk-font-size-md);
  font-weight: var(--pk-font-weight-medium);
}

.pk-field input,
.pk-field select,
.pk-field textarea {
  background: var(--pk-color-bg-surface-subtle);
  border: 1px solid var(--pk-color-border-default);
  border-radius: var(--pk-radius-md);
  color: var(--pk-color-text-primary);
  min-height: 2.75rem;
  padding: var(--pk-space-3) var(--pk-space-4);
}

.pk-field input:focus,
.pk-field select:focus,
.pk-field textarea:focus {
  border-color: var(--pk-color-border-focus);
  box-shadow: var(--pk-shadow-focus);
  outline: none;
}

.pk-token-smoke {
  background: var(--pk-color-bg-surface);
  border: 1px solid var(--pk-color-border-default);
  color: var(--pk-color-text-primary);
}

@media (prefers-reduced-motion: reduce) {
  .pk-button {
    transition-duration: 0.01ms;
  }
}