:root {
  --font-family-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-base: 16px;
  --line-height-body: 1.6;
  /* Shared spacing values already used by both page layouts. */
  --space-1: 8px;
  --space-2: 10px;
  --space-3: 12px;
  --space-4: 20px;
  --space-5: 22px;
  --space-6: 32px;
  /* Shared button values already used by both page layouts. */
  --button-min-height: 48px;
  --button-radius: 14px;
  --button-padding-inline: var(--space-4);
  --button-gap: var(--space-1);
  --button-transition: transform .18s ease, background .18s ease, border-color .18s ease;
  --button-small-min-height: 40px;
  --button-small-padding-inline: 16px;
  --button-small-font-size: .88rem;
  /* Shared card values already used by both page layouts. */
  --card-border: 1px solid var(--line);
  --card-background: var(--surface);
  /* Shared native form-control values. Page-specific field treatments remain local. */
  --form-control-font: inherit;
  --form-control-color: inherit;
  --form-control-accent-color: var(--green);
  /* Shared container values. Each page keeps its own --max and responsive breakpoint. */
  --content-gutter: 20px;
  --content-gutter-compact: 14px;
  --content-container-width: min(calc(100% - (var(--content-gutter) * 2)), var(--max));
  --content-container-width-compact: min(calc(100% - (var(--content-gutter-compact) * 2)), var(--max));
}

body {
  font-family: var(--font-family-sans);
  line-height: var(--line-height-body);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {
  font-size: var(--font-size-base);
}

button,
input,
select,
textarea {
  font: var(--form-control-font);
  color: var(--form-control-color);
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--form-control-accent-color);
}

.container {
  width: var(--content-container-width);
  margin-inline: auto;
}

.button {
  min-height: var(--button-min-height);
  border-radius: var(--button-radius);
  padding: 0 var(--button-padding-inline);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap);
  text-decoration: none;
  cursor: pointer;
  transition: var(--button-transition);
}

.button-small {
  min-height: var(--button-small-min-height);
  padding-inline: var(--button-small-padding-inline);
  font-size: var(--button-small-font-size);
}

.card {
  border: var(--card-border);
  background: var(--card-background);
}