:root {
  color-scheme: dark;
  --page-bg: #0a0a0a;
  --surface: rgba(255, 255, 255, 0.04);
  --surface-strong: rgba(255, 255, 255, 0.06);
  --card-bg: rgba(255, 255, 255, 0.03);
  --card-hover: rgba(255, 255, 255, 0.05);
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.15);
  --text-body: rgba(255, 255, 255, 0.84);
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-soft: rgba(255, 255, 255, 0.48);
  --text-strong: #ffffff;
  --heading: #66cccc;
  --heading-secondary: #99adcc;
  --heading-soft: #9fdede;
  --accent: #66cccc;
  --accent-hover: #99ccff;
  --accent-ink: #0a0a0a;
  --accent-soft: rgba(102, 204, 204, 0.09);
  --accent-surface: rgba(102, 204, 204, 0.15);
  --accent-surface-strong: rgba(102, 204, 204, 0.25);
  --accent-border: rgba(102, 204, 204, 0.7);
  --accent-border-soft: rgba(102, 204, 204, 0.4);
  --title-gradient: linear-gradient(90deg, #66cccc, #99ccff);
  --nav-bg: rgba(0, 0, 0, 0.35);
  --mobile-nav-bg: rgba(10, 10, 10, 0.98);
  --banner-filter: brightness(0.7);
  --project-banner-filter: brightness(0.82);
  --code-bg: rgba(255, 255, 255, 0.06);
  --footer-text: rgba(255, 255, 255, 0.6);
}

[data-theme="light"] {
  color-scheme: light;
  --page-bg: #d2dce2;
  --surface: #e0e7eb;
  --surface-strong: #e9eef1;
  --card-bg: #e7edf0;
  --card-hover: #edf2f4;
  --border: rgba(25, 50, 60, 0.3);
  --border-strong: rgba(25, 50, 60, 0.44);
  --text-body: #1b2931;
  --text-muted: #354650;
  --text-soft: #53656f;
  --text-strong: #14232b;
  --heading: #347773;
  --heading-secondary: #36566a;
  --heading-soft: #175d68;
  --accent: #347773;
  --accent-hover: #175d68;
  --accent-ink: #ffffff;
  --accent-soft: rgba(52, 119, 115, 0.1);
  --accent-surface: rgba(52, 119, 115, 0.14);
  --accent-surface-strong: rgba(52, 119, 115, 0.2);
  --accent-border: rgba(52, 119, 115, 0.68);
  --accent-border-soft: rgba(52, 119, 115, 0.44);
  --title-gradient: linear-gradient(90deg, #347773, #175d68);
  --nav-bg: rgba(224, 231, 235, 0.98);
  --mobile-nav-bg: rgba(210, 220, 226, 0.99);
  --banner-filter: brightness(0.92) saturate(1.02);
  --project-banner-filter: brightness(0.96) saturate(1.02);
  --code-bg: rgba(52, 119, 115, 0.08);
  --footer-text: #435761;
}

[data-theme="light"] .card-section h2,
[data-theme="light"] .card-intro h2,
[data-theme="light"] .card h3,
[data-theme="light"] .project-card-body h3 {
  color: var(--heading);
  font-weight: 700;
}

[data-theme="light"] .outline-pill {
  border-color: var(--border-strong);
  color: var(--text-muted);
}

[data-theme="light"] .outline-pill-first,
[data-theme="light"] .highlight-pill {
  border-color: var(--accent-border);
  color: var(--accent);
  background: var(--accent-surface);
}

[data-theme="light"] .card-button {
  font-weight: 600;
}