:root {
  --vp-burgundy: #984654;
  --vp-burgundy-dark: #713641;
  --vp-burgundy-mid: #ad6270;
  --vp-burgundy-soft: #f2e3e6;
  --vp-navy: #3f5f86;
  --vp-navy-dark: #294463;
  --vp-navy-soft: #e6edf4;
  --vp-surface: #faf9f6;
  --vp-surface-alt: #f1f0eb;
  --vp-ink: #27313d;
  --vp-text: #4c5864;
  --vp-muted: #697580;
  --vp-border: #d7d8d3;
  --vp-success: #2f6b52;
  --vp-success-soft: #dcebe2;
  --vp-error: #a54852;
  --vp-error-soft: #f3e1e3;
  --vp-amber: #a96f18;
  --vp-amber-dark: #7e5210;
  --vp-amber-soft: #f4e6c8;
  --vp-warm-brown: #6a4a2a;

  --red-dark: var(--vp-burgundy-dark);
  --red-deep: var(--vp-burgundy-dark);
  --red: var(--vp-burgundy);
  --red-mid: var(--vp-burgundy-mid);
  --red-light: var(--vp-burgundy-mid);
  --red-bright: var(--vp-burgundy);
  --red-pale: var(--vp-burgundy-soft);
  --red-bg: var(--vp-burgundy-soft);
  --blue-dark: var(--vp-navy-dark);
  --blue: var(--vp-navy);
  --blue-bright: var(--vp-navy);
  --blue-light: var(--vp-navy-soft);
  --blue-lt: var(--vp-navy-soft);
  --blue-border: var(--vp-navy);
  --blue-card: var(--vp-navy-soft);
  --blue-pale: var(--vp-navy-soft);
  --blue-panel: var(--vp-navy-soft);
  --dark: var(--vp-ink);
  --text-dark: var(--vp-ink);
  --text-mid: var(--vp-text);
  --text-muted: var(--vp-muted);
  --text-dim: var(--vp-muted);
  --text-soft: var(--vp-muted);
  --slate: var(--vp-text);
  --steel: var(--vp-muted);
  --border: var(--vp-border);
  --gray-border: var(--vp-border);
  --bg: var(--vp-surface-alt);
  --cream: var(--vp-surface);
  --off-white: var(--vp-surface);
  --warm-white: var(--vp-surface);
  --light: var(--vp-surface);
  --light-gray: var(--vp-surface-alt);
  --white: #ffffff;
  --olive: var(--vp-burgundy);
  --olive-light: var(--vp-burgundy-mid);
  --sand: var(--vp-navy);
  --sand-bg: var(--vp-navy-soft);
  --sand-light: var(--vp-navy-soft);
  --amber: var(--vp-amber);
  --amber-light: var(--vp-amber-soft);
  --amber-pale: var(--vp-amber-soft);
  --warm-amber: var(--vp-amber);
  --warm-amber-light: var(--vp-amber-soft);
  --warm-amber-pale: var(--vp-amber-soft);
  --warm-brown: var(--vp-warm-brown);
  --green: var(--vp-success);
  --green-light: var(--vp-success-soft);
  --green-pale: var(--vp-success-soft);
  --green-bg: var(--vp-success-soft);
}

::selection {
  background: var(--vp-burgundy-soft);
  color: var(--vp-ink);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--vp-amber);
  outline-offset: 3px;
}

:where(input, select, textarea) {
  color: var(--vp-ink);
  background-color: var(--vp-surface);
  border-color: var(--vp-border);
}

:where(input, select, textarea)::placeholder {
  color: var(--vp-muted);
}

.vp-help-confirmation {
  margin: 0 auto clamp(1.25rem, 3vw, 2rem);
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 1px solid var(--vp-success);
  border-left: 4px solid var(--vp-amber);
  color: var(--vp-ink);
  background: var(--vp-success-soft);
}

.vp-help-confirmation:focus {
  outline: 3px solid var(--vp-amber);
  outline-offset: 3px;
}

.vp-help-confirmation h2 {
  margin: 0 0 .45rem;
  color: var(--vp-navy);
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
}

.vp-help-confirmation p {
  margin: 0;
  max-width: 70ch;
  color: var(--vp-text);
  font-size: .85rem;
  line-height: 1.65;
}

.vp-help-confirmation h3 {
  margin: 1rem 0 .5rem;
  color: var(--vp-navy-dark);
  font-size: .95rem;
}

.vp-help-confirmation ul {
  display: grid;
  gap: .4rem;
  margin: 0;
  padding-left: 1.25rem;
}

.vp-help-confirmation li {
  padding-left: .15rem;
  color: var(--vp-text);
  font-size: .85rem;
  line-height: 1.5;
}

.vp-help-confirmation li::marker {
  color: var(--vp-burgundy);
  font-weight: 700;
}

.vp-help-confirmation a {
  color: var(--vp-burgundy-dark);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: .1em;
  text-underline-offset: .15em;
  transition: color .15s, background-color .15s;
}

.vp-help-confirmation a:hover {
  color: var(--vp-burgundy);
  background: var(--vp-burgundy-soft);
}

.vp-help-confirmation a:focus-visible {
  outline: 3px solid var(--vp-amber);
  outline-offset: 3px;
  background: var(--vp-burgundy-soft);
}
