/*
 * KPF HIG core design tokens and ergonomics floor.
 * Canonical source: sub/common/kpf-hig-core.css. Distributed by bin/sync-hig-core.mjs; do not edit mirrors.
 */
:root {
  /* 8pt spatial grid */
  --kpf-space-2xs: 4px;
  --kpf-space-xs: 8px;
  --kpf-space-sm: 12px;
  --kpf-space-md: 16px;
  --kpf-space-lg: 24px;
  --kpf-space-xl: 32px;
  --kpf-space-2xl: 48px;

  /* Soft elevated surfaces replace hard dividers */
  --kpf-surface-elevated: rgba(28, 28, 30, 0.72);
  --kpf-surface-border: 1px solid rgba(255, 255, 255, 0.08);
  --kpf-surface-blur: blur(25px) saturate(180%);
  --kpf-card-padding: var(--kpf-space-lg);
  --kpf-radius-card: 20px;

  /* Fitts's law and input floor */
  --kpf-target-min: 44px;
  --kpf-input-font-min: 16px;

  /* Doherty threshold: tactile feedback under 100ms */
  --kpf-spring-physics: cubic-bezier(0.25, 1, 0.5, 1);
  --kpf-transition-fast: 0.12s var(--kpf-spring-physics);
  --kpf-press-scale: scale(0.97);
}

/* WebKit floor */
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

input, textarea, select {
  font-size: max(var(--kpf-input-font-min), 1em);
}

/* Fitts's law: minimum hit area for every interactive control */
button,
[role="button"],
[role="tab"],
input[type="button"],
input[type="submit"],
input[type="reset"],
summary,
a.kpf-link,
.kpf-pill,
.kpf-tab-item,
.kpf-nav-item,
.kpf-interactive-cell {
  min-height: var(--kpf-target-min);
  min-width: var(--kpf-target-min);
}

input:not([type="checkbox"]):not([type="radio"]),
select {
  min-height: var(--kpf-target-min);
}

/* Elevated surface: generous padding, no harsh dividers */
.kpf-card,
.kpf-surface {
  padding: var(--kpf-card-padding);
  background: var(--kpf-surface-elevated);
  border: var(--kpf-surface-border);
  border-radius: var(--kpf-radius-card);
  -webkit-backdrop-filter: var(--kpf-surface-blur);
  backdrop-filter: var(--kpf-surface-blur);
}

.kpf-card hr,
.kpf-surface hr {
  border: 0;
  height: var(--kpf-space-md);
  background: transparent;
}

/* Floating error card with inline recovery action */
.kpf-error-card {
  display: flex;
  align-items: center;
  gap: var(--kpf-space-sm);
  padding: var(--kpf-space-md) var(--kpf-space-lg);
  background: var(--kpf-surface-elevated);
  border: var(--kpf-surface-border);
  border-radius: var(--kpf-radius-card);
  -webkit-backdrop-filter: var(--kpf-surface-blur);
  backdrop-filter: var(--kpf-surface-blur);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.kpf-error-card[hidden] {
  display: none;
}

.kpf-error-card .kpf-error-message {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Doherty response physics */
button,
[role="button"],
.kpf-interactive-cell,
.kpf-tab-item {
  transition: transform var(--kpf-transition-fast), opacity var(--kpf-transition-fast);
}

button:active, .kpf-interactive-cell:active, .kpf-tab-item:active {
  transform: var(--kpf-press-scale);
  opacity: 0.88;
  transition: transform var(--kpf-transition-fast), opacity var(--kpf-transition-fast);
}

@media (prefers-reduced-motion: reduce) {
  button:active, .kpf-interactive-cell:active, .kpf-tab-item:active {
    transform: none;
  }
}

/* Thumb zone: primary navigation and confirmation drawers sit on the bottom floor */
@media (max-width: 768px) {
  .kpf-bottom-nav,
  .kpf-bottom-drawer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: var(--kpf-space-sm) var(--kpf-space-md) calc(var(--kpf-space-sm) + env(safe-area-inset-bottom, 0px));
    background: var(--kpf-surface-elevated);
    border-top: var(--kpf-surface-border);
    -webkit-backdrop-filter: var(--kpf-surface-blur);
    backdrop-filter: var(--kpf-surface-blur);
  }

  .kpf-bottom-nav {
    display: flex;
    justify-content: space-around;
    gap: var(--kpf-space-xs);
  }

  .kpf-bottom-drawer {
    border-radius: var(--kpf-radius-card) var(--kpf-radius-card) 0 0;
  }

  .kpf-error-card {
    position: fixed;
    left: var(--kpf-space-md);
    right: var(--kpf-space-md);
    bottom: calc(var(--kpf-space-md) + env(safe-area-inset-bottom, 0px));
    z-index: 1100;
  }
}