/* ================================================================
   Carbon Calculator — visual skin
   Tokens sourced from design-system/colors_and_type.css
================================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.calculator-wrapper {
  font-family: var(--font-sans);
}

.py-lg-6 {
  padding-top: 5rem;
  padding-bottom: 5rem;
}

/* ── Cards ────────────────────────────────────────────────── */
.hero-shell,
.calculator-card,
.results-card {
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-sm);
}

.hero-shell {
  background: linear-gradient(135deg, rgba(255,255,255,0.97), var(--n-50));
}

.hero-shell h1,
.results-card h2,
.calculator-card h2 {
  font-family: var(--font-display);
  font-weight: var(--weight-extrabold);
  letter-spacing: var(--tracking-tight);
  color: var(--n-900);
}

/* ── Inner panels ─────────────────────────────────────────── */
.hero-note,
.results-placeholder,
.summary-tile,
.results-meta,
.disclaimer-box {
  border: 1px solid var(--border);
  background: var(--n-50);
}

.summary-tile.accent {
  background: rgba(201,12,15,0.05);
  border-color: rgba(201,12,15,0.15);
}

/* ── Typography helpers ───────────────────────────────────── */
.eyebrow,
.small-label,
.meta-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--palm-red);
}

.lead,
.text-secondary,
.form-text {
  color: var(--fg-2) !important;
  font-family: var(--font-sans);
}

/* ── Step pills ───────────────────────────────────────────── */
.step-pill {
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: rgba(201,12,15,0.08);
  color: var(--palm-brown);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.step-pill.muted {
  background: var(--n-100);
  color: var(--fg-2);
}

/* ── Form controls ────────────────────────────────────────── */
.form-label {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--fg-1);
  margin-bottom: 6px;
}

.form-control,
.form-select,
.input-group-text {
  font-family: var(--font-sans);
  border-color: var(--border-strong);
  background-color: var(--bg-raised);
  color: var(--fg-1);
  min-height: 3.25rem;
  border-radius: var(--radius-sm) !important;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--palm-red);
  box-shadow: 0 0 0 3px rgba(201,12,15,0.14);
}

.form-control::placeholder { color: var(--fg-3); }

/* ── Primary button ───────────────────────────────────────── */
.btn-primary {
  --bs-btn-bg: var(--palm-red);
  --bs-btn-border-color: var(--palm-red);
  --bs-btn-hover-bg: var(--accent-hover);
  --bs-btn-hover-border-color: var(--accent-hover);
  --bs-btn-active-bg: var(--accent-press);
  --bs-btn-active-border-color: var(--accent-press);
  --bs-btn-disabled-bg: var(--palm-red);
  --bs-btn-disabled-border-color: var(--palm-red);
  font-family: var(--font-sans);
  font-weight: var(--weight-bold);
  border-radius: var(--radius-pill) !important;
  transition: background var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast);
}
.btn-primary:hover {
  box-shadow: var(--shadow-brand);
  transform: translateY(-1px);
}
.btn-primary:active { transform: scale(0.99); }

/* ── Results placeholder ──────────────────────────────────── */
.results-placeholder {
  min-height: 18rem;
  display: grid;
  place-items: center;
}

.results-placeholder h3 {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  color: var(--n-900);
}

/* ── Results meta bar ─────────────────────────────────────── */
.meta-value {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  color: var(--fg-1);
}

/* ── Valuation table ──────────────────────────────────────── */
.valuation-table thead th {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-bottom-width: 1px;
  border-color: var(--border);
  color: var(--n-900);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: 0.02em;
}

.valuation-table tbody td,
.valuation-table tbody th {
  padding-top: 1rem;
  padding-bottom: 1rem;
  border-color: var(--border);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--fg-2);
}

.valuation-table tbody tr:first-child td,
.valuation-table tbody tr:first-child th {
  border-top: none;
}

.value-cell {
  font-weight: var(--weight-bold);
  white-space: nowrap;
  color: var(--fg-1);
}

.year-cell {
  font-weight: var(--weight-extrabold);
  font-family: var(--font-mono);
  color: var(--fg-1);
  letter-spacing: 0.02em;
}

/* ── Alert ────────────────────────────────────────────────── */
.alert-warning {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  background: var(--golden-50);
  border-color: var(--golden) !important;
  color: var(--n-800);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .display-5 { font-size: 2.5rem; }
  .py-lg-6 { padding-top: 3rem; padding-bottom: 3rem; }
}