:root {
  --ui-primary: #2f3033;
  --ui-primary-hover: #3b3d41;
  --ui-text: #111827;
  --ui-text-muted: #6b7280;
  --ui-border: #e5e7eb;
  --ui-border-strong: #d1d5db;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f8fafc;
  --ui-danger: #dc2626;
  --ui-focus: rgba(148, 163, 184, 0.24);

  --radius-xs: 8px;
  --radius-control: 10px;
  --radius-card: 16px;
  --radius-large: 20px;
  --radius-pill: 999px;

  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 46px;

  --font-xs: 12px;
  --font-sm: 13px;
  --font-md: 14px;
  --font-lg: 15px;
  --font-card-title: 18px;
  --font-section-title: 22px;
  --font-page-title: 28px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  --shadow-card: 0 8px 24px rgba(15, 23, 42, 0.05);
  --shadow-floating: 0 16px 40px rgba(15, 23, 42, 0.12);

  --bs-body-font-size: var(--font-md);
  --bs-border-color: var(--ui-border);
  --bs-border-radius: var(--radius-control);
  --bs-border-radius-lg: var(--radius-card);
  --bs-primary: var(--ui-primary);
  --bs-primary-rgb: 47, 48, 51;
}

@media (max-width: 768px) {
  :root {
    --font-page-title: 24px;
    --font-section-title: 20px;
    --control-md: 38px;
    --control-lg: 42px;
    --space-5: 18px;
    --space-6: 20px;
  }
}

@media (max-width: 480px) {
  :root {
    --font-page-title: 22px;
    --control-md: 36px;
    --control-lg: 40px;
  }
}

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

h1,
.h1,
.ui-page-title {
  font-size: var(--font-page-title);
  line-height: 1.25;
  letter-spacing: 0;
}

h2,
.h2,
.ui-section-title {
  font-size: var(--font-section-title);
  line-height: 1.3;
  letter-spacing: 0;
}

.ui-card,
.card {
  border-color: var(--ui-border);
  border-radius: var(--radius-card);
  background: var(--ui-surface);
}

.ui-card {
  padding: var(--space-4);
  box-shadow: var(--shadow-card);
}

.ui-panel {
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-card);
  background: var(--ui-surface);
  padding: var(--space-5);
  box-shadow: var(--shadow-card);
}

.ui-action-card {
  display: block;
  padding: var(--space-6) var(--space-5);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-large);
  background: var(--ui-surface);
  color: var(--ui-text);
  text-align: center;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.ui-action-card:hover,
.ui-action-card:focus {
  border-color: var(--ui-border-strong);
  background: var(--ui-surface-soft);
  color: var(--ui-text);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.card.shadow-sm,
.shadow-sm.card {
  box-shadow: var(--shadow-card) !important;
}

.ui-input,
.ui-select,
.form-control,
.form-select,
input[type="text"]:not(.flatpickr-input):not(.manse-y):not(.manse-m):not(.manse-d),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
  border-color: var(--ui-border-strong);
  border-radius: var(--radius-control);
  color: var(--ui-text);
  font-size: var(--font-md);
}

.ui-input,
.ui-select,
.form-control,
.form-select,
input[type="text"]:not(.flatpickr-input):not(.manse-y):not(.manse-m):not(.manse-d),
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
select {
  min-height: var(--control-md);
}

.ui-input:focus,
.ui-select:focus,
.form-control:focus,
.form-select:focus,
input[type="text"]:not(.flatpickr-input):not(.manse-y):not(.manse-m):not(.manse-d):focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
  border-color: #94a3b8;
  box-shadow: 0 0 0 3px var(--ui-focus);
  outline: none;
}

.ui-btn,
.btn:not(.btn-link):not(.btn-close) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--control-md);
  padding: 0 14px;
  border-radius: var(--radius-control);
  font-size: var(--font-md);
  font-weight: 700;
  line-height: 1.1;
  text-decoration: none;
}

.btn-sm,
.ui-btn-sm {
  min-height: var(--control-sm);
  padding-right: 10px;
  padding-left: 10px;
  border-radius: var(--radius-xs);
  font-size: var(--font-sm);
}

.btn-lg,
.ui-btn-lg {
  min-height: var(--control-lg);
  padding-right: 18px;
  padding-left: 18px;
  font-size: var(--font-lg);
}

.ui-btn-primary,
.btn-primary,
.btn-dark {
  border-color: var(--ui-primary);
  background-color: var(--ui-primary);
  color: #fff;
}

.ui-btn-primary:hover,
.ui-btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus {
  border-color: var(--ui-primary-hover);
  background-color: var(--ui-primary-hover);
  color: #fff;
}

.ui-btn-secondary,
.btn-outline-secondary {
  border-color: var(--ui-border-strong);
  background-color: #fff;
  color: var(--ui-text);
}

.ui-btn-secondary:hover,
.ui-btn-secondary:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  border-color: var(--ui-primary);
  background-color: var(--ui-primary);
  color: #fff;
}

.btn-outline-primary {
  border-color: var(--ui-border-strong);
  color: var(--ui-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  border-color: var(--ui-primary);
  background-color: var(--ui-primary);
  color: #fff;
}

.ui-muted {
  color: var(--ui-text-muted);
}

.ui-page-title,
.ui-section-title,
.ui-card-title {
  margin-top: 0;
  color: var(--ui-text);
  font-weight: 800;
}

.ui-card-title {
  font-size: var(--font-card-title);
  line-height: 1.35;
  letter-spacing: 0;
}

.ui-eyebrow {
  display: inline-block;
  padding: 6px 10px;
  border-radius: var(--radius-pill);
  background: var(--ui-surface-soft);
  color: var(--ui-text-muted);
  font-size: var(--font-xs);
  font-weight: 800;
}

.ui-copy {
  color: var(--ui-text-muted);
  font-size: var(--font-lg);
  line-height: 1.7;
}

.birth-summary-profile-select {
  min-height: var(--control-md);
  border-radius: var(--radius-control);
  font-size: var(--font-md);
}

.custom-alt-input {
  min-height: var(--control-md);
  border-radius: var(--radius-control);
  font-size: var(--font-md);
}