/* Semantic classes — replace repeated Tailwind utility strings.
   Design tokens are in :root (tokens.css or inline).
   Import this after tailwind.css and before styles.css. */

:root {
  --ink: #073630;
  --champagne: #dbc7ae;
  --white: #fff;
  --surface: #fdfcfb;
  --muted: rgba(7, 54, 48, 0.6);
  --serif: 'Spectral', serif;
  --sans: 'Karla', sans-serif;
  --content-width: 72rem;
}

/* ─── Typography ──────────────────────────── */

.page-title {
  font: 900 clamp(2.25rem, 5vw, 3rem) / 1.1 var(--serif);
  color: var(--ink);
  margin-bottom: 1.5rem;
  letter-spacing: -0.01em;
}

.section-title {
  font: 700 clamp(1.875rem, 4vw, 2.25rem) / 1.2 var(--serif);
  color: var(--ink);
}

.subsection-title {
  font: 700 1.5rem/1.3 var(--serif);
  color: var(--ink);
  margin-bottom: 0.75rem;
}

.section-label {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--muted);
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.body-serif {
  font: 400 1.125rem/1.7 var(--serif);
  color: var(--muted);
}

.body-muted {
  font: 400 1rem/1.6 var(--sans);
  color: var(--muted);
}

/* ─── Form elements ───────────────────────── */

.field-label {
  display: block;
  margin-bottom: 0.25rem;
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
}

.calc-input {
  width: 100%;
  font: 700 1.5rem/1.3 var(--serif);
  color: var(--ink);
  border: none;
  background: transparent;
  padding: 0;
}
.calc-input:focus { outline: none; }

/* ─── Interactive elements ────────────────── */

.action-link {
  display: inline-flex;
  align-items: center;
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 0.25rem;
  transition: padding 0.2s;
}
.group:hover .action-link,
.action-link:hover { padding-right: 0.5rem; }

.arch-btn {
  display: block;
  width: 100%;
  text-align: left;
  color: var(--muted);
  padding: 0.5rem 0 0.5rem 1rem;
  border-left: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  font: 400 1.125rem/1.5 var(--serif);
}
.arch-btn:hover,
.arch-btn[aria-selected="true"],
.arch-btn.active {
  color: var(--ink);
  border-left-color: var(--ink);
}

/* ─── Cards and sections ──────────────────── */

.card-link {
  display: block;
  text-align: left;
  padding-top: 2rem;
  padding-bottom: 0.5rem;
}

.divider {
  border-bottom: 1px solid rgba(7, 54, 48, 0.1);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

.divider-strong {
  border-bottom: 1px solid rgba(7, 54, 48, 0.2);
  padding-bottom: 1rem;
  margin-bottom: 1.5rem;
}

/* ─── Results display ─────────────────────── */

.result-number {
  font: 900 clamp(2rem, 6vw, 3rem) / 1.1 var(--serif);
  color: var(--ink);
}

.result-label {
  display: block;
  font: 700 0.75rem/1 var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}

.source-note {
  font: 400 0.75rem/1.6 var(--sans);
  color: var(--muted);
  border-top: 1px solid rgba(7, 54, 48, 0.1);
  padding-top: 1.5rem;
}

/* Focus indicators (accessibility) */

input[type="range"]:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}

.calc-input:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--ink);
}

select:focus-visible,
input[type="number"]:focus-visible,
input[type="text"]:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 1px;
}

button:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}

a:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 2px;
}