:root {
  --ux-bg: #f5f7fb;
  --ux-surface: #ffffff;
  --ux-border: #d7e0ea;
  --ux-text: #17212b;
  --ux-muted: #516173;
  --ux-brand: #f3d044;
  --ux-focus: #0b67d1;
}

html { scroll-behavior: smooth; }
body {
  background: linear-gradient(180deg, #ffffff 0%, var(--ux-bg) 100%);
  color: var(--ux-text);
}

h1, h2, h3 { letter-spacing: .01em; }
p, li, label, .small, .muted { color: var(--ux-muted); }

input, select, textarea {
  min-height: 42px;
  border-radius: 10px;
  border: 1px solid var(--ux-border);
  background: #fff;
}

button, .btn, [role='button'] {
  min-height: 42px;
  border-radius: 10px;
}

button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(11, 103, 209, .35);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--ux-focus) inset;
}

header {
  backdrop-filter: saturate(1.05) blur(4px);
}

.ux-chip-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 800;
  color: #34495e;
  background: #fff7d1;
  border: 1px solid #ecd37b;
  padding: 6px 10px;
  border-radius: 999px;
  margin: 0 0 10px 0;
}

.ux-help-box {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #d9e4f0;
  background: #f7fbff;
  color: #29435d;
  font-size: .9rem;
}

.ux-skip-link {
  position: fixed;
  left: 12px;
  top: -100px;
  z-index: 9999;
  background: #111;
  color: #fff;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
}

.ux-skip-link:focus {
  top: 12px;
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  header { padding-left: .8rem !important; padding-right: .8rem !important; }
}