:root {
  --site-dark: #18181b;
  --site-ink: #27272a;
  --site-muted: #71717a;
  --site-primary: #f97316;
  --site-primary-dark: #ea580c;
  --site-accent: #facc15;
  --site-soft: #fff7ed;
  --site-line: rgba(249, 115, 22, .18);

  --glass-deep: var(--site-dark);
  --glass-blue: var(--site-primary);
  --glass-mint: var(--site-accent);
  --glass-ink: var(--site-ink);
  --glass-soft: var(--site-soft);
  --glass-line: var(--site-line);

  --alum-dark: var(--site-dark);
  --alum-steel: var(--site-muted);
  --alum-blue: var(--site-primary);
  --alum-gold: var(--site-accent);
  --alum-soft: var(--site-soft);
  --alum-line: var(--site-line);

  --about-dark: var(--site-dark);
  --about-blue: var(--site-primary);
  --about-green: var(--site-accent);
  --about-gold: var(--site-accent);
  --about-soft: var(--site-soft);
  --about-ink: var(--site-ink);
  --about-line: var(--site-line);

  --contact-dark: var(--site-dark);
  --contact-blue: var(--site-primary);
  --contact-green: var(--site-accent);
  --contact-gold: var(--site-accent);
  --contact-soft: var(--site-soft);
  --contact-line: var(--site-line);

  --frame-dark: var(--site-dark);
  --frame-wood: var(--site-primary);
  --frame-coral: var(--site-accent);
  --frame-blue: var(--site-primary);
  --frame-soft: var(--site-soft);
  --frame-line: var(--site-line);
}

body {
  background: var(--site-soft);
  color: var(--site-ink);
}

.btn.bg-gradient-info,
.btn.bg-gradient-primary {
  background-image: linear-gradient(310deg, var(--site-primary-dark) 0%, var(--site-accent) 100%);
  border: 0;
}

.text-info,
.text-primary,
.section-kicker {
  color: var(--site-primary) !important;
}

.quick-link i,
.showcase-list i,
.check-list i,
.hero-note i,
.proof-item i,
.contact-link:hover {
  color: var(--site-primary) !important;
}

.chip-list li,
.tag-list li {
  background: rgba(249, 115, 22, .1) !important;
  color: #c2410c !important;
}

.feature-icon,
.service-icon,
.contact-icon {
  background: linear-gradient(135deg, var(--site-primary-dark), var(--site-accent)) !important;
  box-shadow: 0 12px 28px rgba(249, 115, 22, .24) !important;
}

.showcase,
.spotlight,
.feature-showcase,
.process-band {
  background: var(--site-dark) !important;
}

.cta-panel {
  background-color: var(--site-primary-dark);
  background-blend-mode: multiply;
}

.form-control:focus,
.form-select:focus {
  border-color: rgba(249, 115, 22, .55) !important;
  box-shadow: 0 0 0 .2rem rgba(249, 115, 22, .12) !important;
}

.vidrios-hero,
.aluminio-hero,
.about-hero,
.contact-hero,
.marqueteria-hero {
  background-color: var(--site-dark);
}