:root {
  /* Dark navy header — unchanged foundation */
  --sk-header-from: #0b1020;
  --sk-header-to: #101c2e;
  --sk-header-bg: #0b1020;

  /* Light content — soft green-gray (no cool blue wash) */
  --sk-bg: #f3f6f4;
  --sk-surface: #ffffff;
  --sk-surface-muted: #eaf1ec;
  --sk-text: #142018;
  --sk-muted: #52625a;
  --sk-border: #cdd8d2;

  /* Primary accent — emerald (replaces cyan / light blue) */
  --sk-primary: #10b981;
  --sk-primary-hover: #059669;
  --sk-primary-ink: #052e1f;
  --sk-primary-soft: rgba(16, 185, 129, 0.14);

  /* Header highlights on dark navy */
  --sk-header-accent: #6ee7b7;
  --sk-header-accent-soft: rgba(110, 231, 183, 0.16);

  /* Product accents */
  --sk-samaya: #0d9488;
  --sk-samaya-soft: rgba(13, 148, 136, 0.16);
  --sk-dhiyo: #16a34a;
  --sk-dhiyo-soft: rgba(22, 163, 74, 0.14);

  /* Links & interactive */
  --sk-link: #0f766e;
  --sk-link-hover: #047857;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--sk-bg);
  color: var(--sk-text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
}

a {
  color: var(--sk-link);
}

a:hover {
  color: var(--sk-link-hover);
}

.section-surface {
  background: var(--sk-surface);
  border: 1px solid var(--sk-border);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(20, 32, 24, 0.07);
}

.section-muted {
  background: var(--sk-surface-muted);
  border-radius: 16px;
}

.page-title {
  font-size: clamp(1.7rem, 2vw + 1rem, 2.4rem);
  line-height: 1.2;
  font-weight: 700;
}

.page-lead {
  color: var(--sk-muted);
  font-size: 1.05rem;
}

.btn-portfolio-primary {
  border: 1px solid var(--sk-primary);
  background: var(--sk-primary);
  color: #ffffff;
  font-weight: 600;
}

.btn-portfolio-primary:hover {
  background: var(--sk-primary-hover);
  border-color: var(--sk-primary-hover);
  color: #ffffff;
}

.btn-portfolio-outline {
  border: 1px solid #6b8f7e;
  background: transparent;
  color: #1e3a2f;
  font-weight: 600;
}

.btn-portfolio-outline:hover {
  background: var(--sk-surface-muted);
  border-color: var(--sk-link);
  color: #052e1f;
}

.btn-product-outline {
  border: 1px solid rgba(110, 231, 183, 0.55);
  background: transparent;
  color: #6ee7b7;
  font-weight: 600;
}

.btn-product-outline:hover {
  background: rgba(16, 185, 129, 0.2);
  border-color: #6ee7b7;
  color: #ffffff;
}

.btn-product-light {
  border: 1px solid var(--sk-samaya);
  background: transparent;
  color: var(--sk-link);
  font-weight: 600;
}

.btn-product-light:hover {
  background: var(--sk-primary);
  border-color: var(--sk-primary);
  color: #ffffff;
}

.btn-product-light--dhiyo {
  border-color: var(--sk-dhiyo);
  color: #15803d;
}

.btn-product-light--dhiyo:hover {
  background: var(--sk-dhiyo);
  border-color: var(--sk-dhiyo);
  color: #ffffff;
}

.btn-product-outline .sk-site-icon,
.btn-product-outline .hub-icon--inline,
.btn-product-outline .sk-icon {
  color: inherit;
}

.btn-product-light .sk-site-icon,
.btn-product-light .hub-icon--inline,
.btn-product-light .sk-icon {
  color: inherit;
}

.accent-chip {
  display: inline-block;
  border: 1px solid var(--sk-border);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
  color: var(--sk-muted);
  font-size: 0.78rem;
  font-weight: 500;
}

.accent-chip--samaya {
  border-color: rgba(13, 148, 136, 0.45);
  color: #0f766e;
  background: var(--sk-samaya-soft);
}

.accent-chip--dhiyo {
  border-color: rgba(22, 163, 74, 0.45);
  color: #15803d;
  background: var(--sk-dhiyo-soft);
}

.btn-outline-coder {
  border: 1px solid var(--sk-primary);
  color: var(--sk-link);
  background: transparent;
  font-weight: 600;
}

.btn-outline-coder:hover {
  background: var(--sk-primary);
  border-color: var(--sk-primary);
  color: #ffffff;
}

.site-footer {
  background: var(--sk-surface);
}

.site-footer .footer-link {
  color: #475569;
  text-decoration: none;
}

.site-footer .footer-link:hover {
  color: var(--sk-link-hover);
}

.site-footer .footer-rule {
  border-color: var(--sk-border);
}

.site-footer .footer-muted {
  color: #64748b;
}

.site-tagline {
  color: var(--sk-muted);
  font-size: 0.95rem;
  line-height: 1.55;
  margin: 0;
}

.site-tagline--hero {
  font-size: 1rem;
  max-width: 52rem;
}

.site-tagline--compact {
  font-size: 0.85rem;
}