/* Mist theme – light, teal accent. Load after styles.css. */

:root {
  --color-bg: #f5f6f8;
  --color-surface: #ffffff;
  --color-surface-alt: #e8eaef;
  --color-text: #0a0a0a;
  --color-text-muted: #64748b;
  --color-accent: #0d9488;
  --color-accent-dark: #0f766e;
  --color-white: #ffffff;
}

/* Light theme: headings and logo use text color */
.logo,
.hero h1,
.hero .hero-title,
.section-title,
.project-body h3,
.project-modal-title,
.about-feature-body h3,
.contact-value {
  color: var(--color-text);
}

.logo:hover {
  color: var(--color-accent);
}

/* Header: light background, visible border */
.header {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

/* Hero background: image + overlay for readability */
.hero-bg {
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.08) 100%),
    var(--color-bg) url("../images/project1-school.png") center / cover no-repeat;
}

.hero-bg::after {
  background: transparent;
}

.hero-card {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Project gallery cards – light footer */
.project .project-body {
  background: var(--color-surface-alt);
  border-top-color: rgba(0, 0, 0, 0.08);
}

/* Primary button: white text on teal */
.btn-primary {
  color: #ffffff;
}
.btn-primary:hover {
  color: #ffffff;
}

/* Secondary button on light */
.btn-secondary {
  border-color: rgba(0, 0, 0, 0.12);
}

/* Mobile nav: light border */
@media (max-width: 768px) {
  .nav {
    background: var(--color-surface);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}