/* ============================================================
   Cinco Industrial — Theme Token Aliases
   Extends Material Kit Pro / Bootstrap 5
   ============================================================ */

:root {
  --industrial-primary: var(--color-primary, #198754);
  --industrial-secondary: var(--color-secondary, #6c757d);
  --industrial-accent: var(--color-accent, #0dcaf0);
  --industrial-bg: var(--color-background, #ffffff);
  --industrial-surface: var(--color-surface, #ffffff);
  --industrial-surface-muted: var(--color-surface-muted, #f8f9fa);
  --industrial-text: var(--color-text, #212529);
  --industrial-text-muted: var(--color-text-muted, #6c757d);
  --industrial-text-inverse: var(--color-text-inverse, #ffffff);
  --industrial-heading: var(--color-heading, #212529);
  --industrial-border: var(--color-border, #dee2e6);
  --industrial-focus: var(--color-focus, var(--industrial-primary));
  --industrial-chrome-bg: var(--industrial-bg);
  --industrial-chrome-text: var(--industrial-text);
  --industrial-chrome-border: var(--industrial-border);
  --industrial-font: var(--font-body, Roboto, sans-serif);
  --industrial-heading-font: var(--font-heading, "Roboto Slab", serif);
}

body.industrial-homepage {
  background: var(--industrial-bg);
  color: var(--industrial-text);
  font-family: var(--industrial-font);
}

body.industrial-homepage h1,
body.industrial-homepage h2,
body.industrial-homepage h3,
body.industrial-homepage h4,
body.industrial-homepage h5,
body.industrial-homepage h6 {
  color: var(--industrial-heading);
  font-family: var(--industrial-heading-font);
}

.industrial-navbar {
  background-color: var(--industrial-chrome-bg) !important;
  border-bottom: 1px solid var(--industrial-chrome-border);
}

.industrial-navbar .navbar-brand,
.industrial-navbar .nav-link {
  color: var(--industrial-chrome-text) !important;
}

.industrial-navbar .nav-link:hover,
.industrial-navbar .navbar-brand:hover {
  color: var(--industrial-primary) !important;
}

.industrial-navbar .navbar-toggler-bar {
  background: var(--industrial-chrome-text);
}

.btn-industrial-primary,
.industrial-navbar .btn-industrial-primary {
  background-color: var(--industrial-primary);
  border-color: var(--industrial-primary);
  color: var(--industrial-text-inverse);
}

.btn-industrial-primary:hover,
.btn-industrial-primary:focus {
  background-color: var(--industrial-accent);
  border-color: var(--industrial-accent);
  color: var(--industrial-text-inverse);
}

.industrial-homepage .page-header {
  background-color: var(--industrial-surface-muted);
}

.industrial-homepage .page-header .mask {
  background-image: linear-gradient(195deg, var(--industrial-secondary), var(--industrial-heading)) !important;
  opacity: 0.72;
}

.industrial-homepage .page-header .text-white {
  color: var(--industrial-text-inverse) !important;
}

.industrial-homepage .card.card-body {
  background: var(--industrial-surface);
  color: var(--industrial-text);
  border: 1px solid var(--industrial-border);
  border-radius: var(--border-radius, 0.375rem);
}

.industrial-homepage .industrial-stat {
  color: var(--industrial-primary) !important;
  font-family: var(--industrial-heading-font);
}

.industrial-homepage .industrial-stat-label {
  color: var(--industrial-heading);
  font-family: var(--industrial-heading-font);
}

.industrial-homepage .text-gradient.text-success {
  background-image: linear-gradient(195deg, var(--industrial-primary), var(--industrial-accent));
}

.industrial-homepage .lead,
.industrial-homepage .font-weight-normal,
.industrial-homepage p {
  color: var(--industrial-text);
}

.industrial-homepage .blockquote {
  border-left: 3px solid var(--industrial-primary);
  color: var(--industrial-text-muted);
}

.industrial-homepage .btn-facebook,
.industrial-homepage .btn-youtube,
.industrial-homepage .btn-twitter,
.industrial-homepage .btn-linkedin {
  background-color: var(--industrial-primary);
  color: var(--industrial-text-inverse);
}

.industrial-homepage .btn-facebook:hover,
.industrial-homepage .btn-youtube:hover,
.industrial-homepage .btn-twitter:hover,
.industrial-homepage .btn-linkedin:hover {
  background-color: var(--industrial-accent);
  color: var(--industrial-text-inverse);
}

.industrial-footer {
  background: var(--industrial-chrome-bg);
  border-top: 1px solid var(--industrial-chrome-border);
  color: var(--industrial-chrome-text);
}

.industrial-footer h2 {
  color: var(--industrial-heading);
  font-family: var(--industrial-heading-font);
}

.industrial-footer .nav-link,
.industrial-footer p {
  color: var(--industrial-text);
}

.industrial-footer .nav-link:hover {
  color: var(--industrial-primary);
}