/* Extracted from assets/modal.css — BASE CSS (tokens + html/body defaults) — Step 10A */
/* ===== Typography scale ===== */
:root {
  --font-size-body: 0.95rem;
  --font-size-small: 0.85rem;
  --font-size-h3: 1.1rem;
  --font-size-h4: 1rem;
  --font-size-title: 1.25rem;
}

/* ===== Generic Modal Styles (dark theme) ===== */
:root {
  --overlay-bg: rgba(0, 0, 0, .70);
  --panel-bg: #0f1116;
  --panel-border: #2b2f38;
  --btn-bg: #5a8294;
  --ink: #e9ecf1;
  --muted: #aab2c1;
  --accent: #9be0ff;
  --modal-section-gap: 12px;
}

/* Fine-tune letter spacing globally (optional) */
:root {
  --heading-letter-spacing: 0;
  --body-letter-spacing: 0.02em;
}

/* === Shared accent (same as chip selected) === */
:root {
  --accent-blue: #9be0ff;
  /* main */
  --accent-blue-700: #8acbe9;
  /* hover/active */
  --accent-blue-800: #7cb3cc;
  /* active */
}

/* Added from assets/modal.css — base defaults (10B cleanup) */
/* ===== Global font: Aileron for all modal text ===== */
body,
.modal-panel,
.modal-title,
.section h3,
.section h4,
label,
input,
select,
textarea,
button {
  font-family: "Aileron", system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  font-weight: 400;
  text-transform: none;
  /* ensures normal capitalization */
}

/* Apply these variables */
body,
.modal-panel {
  font-size: var(--font-size-body);
}

.modal-title {
  font-size: var(--font-size-title);
  font-weight: 600;
}

.section h3 {
  font-size: var(--font-size-h3);
  font-weight: 600;
  margin-bottom: 8px;
}

.section h4 {
  font-size: var(--font-size-h4);
  font-weight: 500;
  margin-bottom: 6px;
}

label,
input,
select,
textarea,
button {
  font-size: var(--font-size-body);
}