@import url("/assets/css/wood-fence-cost-per-foot.css");

.vinyl-cost-page {
  --wood-ink: #0f172a;
  --wood-muted: #475569;
  --wood-soft: #dbeafe;
  --wood-line: rgba(37, 99, 235, 0.16);
  --wood-line-strong: rgba(37, 99, 235, 0.28);
  --wood-panel: rgba(255, 255, 255, 0.88);
  --wood-panel-strong: #f8fbff;
  --wood-stone: #334155;
  --wood-amber: #2563eb;
  --wood-amber-deep: #1d4ed8;
  --wood-green: #15803d;
  --wood-red: #dc2626;
  --bg: #f7fbff;
  --bg-elevated: var(--wood-panel);
  --bg-strong: var(--wood-panel-strong);
  --text: var(--wood-ink);
  --text-soft: var(--wood-muted);
  --line: var(--wood-line);
  --line-strong: var(--wood-line-strong);
  --brand: var(--wood-amber);
  --brand-deep: var(--wood-amber-deep);
  --accent: #0f766e;
  --accent-deep: #115e59;
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.15), transparent 30%),
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 24%),
    linear-gradient(180deg, rgba(239, 246, 255, 0.96), rgba(247, 251, 255, 0.76) 340px, rgba(247, 251, 255, 1)),
    var(--bg);
}

:root[data-theme="dark"] .vinyl-cost-page {
  --wood-ink: #f8fafc;
  --wood-muted: #cbd5e1;
  --wood-soft: #172554;
  --wood-line: rgba(191, 219, 254, 0.16);
  --wood-line-strong: rgba(191, 219, 254, 0.28);
  --wood-panel: rgba(15, 23, 42, 0.82);
  --wood-panel-strong: #0f172a;
  --wood-stone: #dbeafe;
  --wood-amber: #93c5fd;
  --wood-amber-deep: #bfdbfe;
  --wood-green: #86efac;
  --wood-red: #fca5a5;
  --bg: #020617;
  --bg-elevated: var(--wood-panel);
  --bg-strong: var(--wood-panel-strong);
  --text: var(--wood-ink);
  --text-soft: var(--wood-muted);
  --line: var(--wood-line);
  --line-strong: var(--wood-line-strong);
  --brand: var(--wood-amber);
  --brand-deep: var(--wood-amber-deep);
  --accent: #5eead4;
  --accent-deep: #ccfbf1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vinyl-cost-page {
    --wood-ink: #f8fafc;
    --wood-muted: #cbd5e1;
    --wood-soft: #172554;
    --wood-line: rgba(191, 219, 254, 0.16);
    --wood-line-strong: rgba(191, 219, 254, 0.28);
    --wood-panel: rgba(15, 23, 42, 0.82);
    --wood-panel-strong: #0f172a;
    --wood-stone: #dbeafe;
    --wood-amber: #93c5fd;
    --wood-amber-deep: #bfdbfe;
    --wood-green: #86efac;
    --wood-red: #fca5a5;
    --bg: #020617;
    --bg-elevated: var(--wood-panel);
    --bg-strong: var(--wood-panel-strong);
    --text: var(--wood-ink);
    --text-soft: var(--wood-muted);
    --line: var(--wood-line);
    --line-strong: var(--wood-line-strong);
    --brand: var(--wood-amber);
    --brand-deep: var(--wood-amber-deep);
    --accent: #5eead4;
    --accent-deep: #ccfbf1;
  }
}

.vinyl-cost-page .site-header {
  background: rgba(239, 246, 255, 0.84);
}

:root[data-theme="dark"] .vinyl-cost-page .site-header {
  background: rgba(2, 6, 23, 0.84);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .vinyl-cost-page .site-header {
    background: rgba(2, 6, 23, 0.84);
  }
}

.vinyl-cost-page .wood-eyebrow {
  border-color: rgba(37, 99, 235, 0.24);
  background: rgba(37, 99, 235, 0.1);
}

.vinyl-cost-page .quick-card {
  background:
    linear-gradient(135deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.78)),
    #eff6ff;
}

:root[data-theme="dark"] .vinyl-cost-page .quick-card {
  background:
    linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(30, 64, 175, 0.18)),
    #0f172a;
}

.vinyl-cost-page .calculator-cta {
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.97), rgba(30, 41, 59, 0.94)),
    #0f172a;
  color: #eff6ff;
}

.vinyl-cost-page .calculator-cta a {
  color: #dbeafe;
  text-decoration-color: rgba(219, 234, 254, 0.36);
}

.vinyl-cost-page .calculator-cta-kicker {
  color: #93c5fd;
}

.vinyl-cost-page .calculator-cta-actions span {
  color: rgba(239, 246, 255, 0.78);
}

.vinyl-cost-page .cost-button {
  background: #0f172a;
}

.vinyl-cost-page .style-card span,
.vinyl-cost-page .related-card span {
  background: rgba(37, 99, 235, 0.1);
}

.vinyl-cost-page .cost-table th {
  background: rgba(37, 99, 235, 0.06);
}

.vinyl-cost-page .cost-tip {
  background: rgba(37, 99, 235, 0.1);
}

.vinyl-cost-page .quote-card.pros {
  border-color: rgba(22, 163, 74, 0.2);
  background:
    linear-gradient(135deg, rgba(22, 163, 74, 0.07), rgba(255, 255, 255, 0)),
    var(--wood-panel);
}

.vinyl-cost-page .quote-card.cons {
  border-color: rgba(220, 38, 38, 0.2);
}