/**
 * Brand palette: black, white, and teal (#3B6B5E) only — text & UI accents.
 */
:root {
  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-teal: #3b6b5e;
  --brand-teal-hover: #2d5247;
  --brand-teal-soft: rgba(59, 107, 94, 0.15);

  --primary-color: var(--brand-teal);
  --primary-color-hover: var(--brand-teal-hover);
  --secondary-color: var(--brand-teal);
  --accent-color: var(--brand-teal);
  --success-color: var(--brand-teal);
  --warning-color: var(--brand-teal);
  --error-color: var(--brand-black);
  --info-color: var(--brand-teal);
  --logo-color: var(--brand-teal);

  --text-color: var(--brand-black);
  --text-color-light: var(--brand-teal);
  --background-color: var(--brand-white);
  --background-secondary: var(--brand-white);
  --border-color: rgba(0, 0, 0, 0.12);

  --dark-text-color: var(--brand-white);
  --dark-text-color-light: rgba(255, 255, 255, 0.88);
  --dark-background-color: var(--brand-black);
  --dark-background-secondary: var(--brand-black);
  --dark-border-color: rgba(255, 255, 255, 0.14);

  --logo-name-color: var(--brand-teal);
  --logo-name-glow: rgba(59, 107, 94, 0.35);
}

body.dark-mode {
  --logo-name-color: var(--brand-white);
  --logo-name-glow: rgba(255, 255, 255, 0.22);
}

/* Headings & body copy */
body {
  color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title,
.about-heading {
  color: var(--text-color);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title,
body.dark-mode .about-heading {
  color: var(--dark-text-color);
}

p,
.section-subtitle,
.about-text,
.resource-card-animated p {
  color: var(--text-color);
}

body.dark-mode p,
body.dark-mode .section-subtitle {
  color: var(--dark-text-color-light);
}

/* Links & buttons */
a {
  color: var(--brand-teal);
}

a:hover {
  color: var(--brand-teal-hover);
}

body.dark-mode a:not(.btn):not(.button):not(.nav-link) {
  color: var(--brand-white);
}

body.dark-mode a:not(.btn):not(.button):not(.nav-link):hover {
  color: var(--brand-teal);
}

.btn-primary,
.button,
.filter-btn.active {
  background-color: var(--brand-teal);
  color: var(--brand-white);
  border-color: var(--brand-teal);
}

.btn-primary:hover,
.button:hover {
  background-color: var(--brand-teal-hover);
  border-color: var(--brand-teal-hover);
  color: var(--brand-white);
}

.btn-outline {
  color: var(--brand-teal);
  border-color: var(--brand-teal);
}

body.dark-mode .btn-outline {
  color: var(--brand-white);
  border-color: var(--brand-white);
}

.section-title::after {
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-teal-hover));
}

section.active .section-title::after,
section:hover .section-title::after {
  background: linear-gradient(90deg, var(--brand-teal), var(--brand-black));
}

/* Nav */
.nav-link {
  color: var(--text-color);
}

.nav-link:hover,
.nav-link.active {
  color: var(--brand-teal);
}

body.dark-mode .nav-link {
  color: var(--dark-text-color-light);
}

body.dark-mode .nav-link:hover,
body.dark-mode .nav-link.active {
  color: var(--brand-white);
}

/* Hero title glitch — teal / white / black only */
body:not(.dark-mode) .logo-cyber-glitch__base {
  color: var(--brand-teal);
  text-shadow:
    0 0 14px var(--logo-name-glow),
    0 0 28px rgba(59, 107, 94, 0.2);
}

body.dark-mode .logo-cyber-glitch__base {
  color: var(--brand-white);
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.25);
}

.logo-cyber-glitch__layer--a {
  color: var(--brand-teal);
}

.logo-cyber-glitch__layer--b {
  color: var(--brand-black);
  opacity: 0.55;
}

body.dark-mode .logo-cyber-glitch__layer--b {
  color: var(--brand-white);
  opacity: 0.45;
}

.logo-cyber-glitch__layer--scan {
  -webkit-text-stroke: 1px rgba(59, 107, 94, 0.5);
  text-stroke: 1px rgba(59, 107, 94, 0.5);
}

body.dark-mode .logo-cyber-glitch__layer--scan {
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.35);
  text-stroke: 1px rgba(255, 255, 255, 0.35);
}

.hero-cyber-tagline {
  color: var(--brand-teal);
  text-shadow: 0 0 10px rgba(59, 107, 94, 0.25);
}

body.dark-mode .hero-cyber-tagline {
  color: var(--brand-white);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.hero-cyber .hero-buttons .btn-outline {
  border-color: var(--brand-teal);
  color: var(--brand-teal);
}

body.dark-mode .hero-cyber .hero-buttons .btn-outline {
  border-color: var(--brand-white);
  color: var(--brand-white);
}

/* Role / topic cards — teal accents only */
.learn-role-card i,
.learn-role-card.cloud i,
.learn-role-card.ai i,
.learn-role-card.emerging i,
.learn-role-card.security i {
  color: var(--brand-teal);
}

.learn-topic-btn.active,
.learn-topic-btn:hover {
  background: var(--brand-teal);
  color: var(--brand-white);
  border-color: var(--brand-teal);
}

/* Footer */
.footer {
  background-color: var(--brand-black);
  color: var(--brand-white);
}

.footer-logo h3,
.footer-links-column h4,
.footer-links-column ul a {
  color: var(--brand-white);
}

.footer-links-column ul a:hover {
  color: var(--brand-teal);
}

.copyright {
  color: var(--dark-text-color-light);
}

.footer .social-links a {
  background-color: var(--brand-teal);
  color: var(--brand-white);
}

.footer .social-links a:hover {
  background-color: var(--brand-white);
  color: var(--brand-teal);
}

/* Satellite / error pages */
.error-page .error-code {
  background: linear-gradient(45deg, var(--brand-teal), var(--brand-black));
  -webkit-background-clip: text;
  background-clip: text;
}

.thanks-icon {
  color: var(--brand-teal);
}

/* Filters */
.filter-btn:hover,
.filter-btn.active {
  color: var(--brand-white);
  background-color: var(--brand-teal);
  border-color: var(--brand-teal);
}