/* ============================================
   SOUTH SEA MARINE — THEME SYSTEM
   Light (default) + Dark (alternative)
   ============================================ */

/* --- LIGHT THEME (Default) --- */
:root {
  --bg-deep:       #F4F1EC;
  --bg-card:       #FFFFFF;
  --bg-surface:    #EDE9E3;
  --gold:          #B08D57;
  --gold-light:    #C9A96E;
  --gold-dark:     #8C6E3F;
  --bronze:        #A07A3F;
  --text-primary:  #111827;
  --text-secondary:#3D4A5C;
  --text-muted:    #64748B;
  --slate:         #C5CCD6;
  --navy:          #E2DDD6;
  --navy-light:    #EDE9E3;
  --border:        rgba(150,120,62,0.18);
  --border-hover:  rgba(150,120,62,0.45);

  /* UI overlay colours (light backgrounds for nav, menus) */
  --overlay-nav:        rgba(244,241,236,0.88);
  --overlay-menu:       rgba(244,241,236,0.98);
  --overlay-card-glow:  rgba(176,141,87,0.06);
  --shadow-card:        rgba(0,0,0,0.06);
  --shadow-text:        rgba(0,0,0,0.08);

  /* IMAGE overlay colours — stay dark in both themes for contrast on photos */
  --overlay-hero:       rgba(10,22,40,0.55);
  --overlay-hero-dense: rgba(10,22,40,0.80);
  --overlay-img:        rgba(10,22,40,0.70);

  /* text on image overlays — always light for readability */
  --text-on-image:      #F0EDE6;
  --text-on-image-secondary: #C5CCD6;

  /* gradient helpers */
  --grad-surface-start: #EDE9E3;
  --grad-surface-end:   #E2DDD6;
  --grad-card-start:    #FFFFFF;
  --grad-card-end:      #F9F7F3;

  /* fonts (shared across themes) */
  --ff-display: 'Cormorant Garamond', Georgia, serif;
  --ff-body:    'Outfit', sans-serif;
  --ff-mono:    'Space Mono', monospace;

  /* light-mode gradient tint (replaces hardcoded dark rgba in sections) */
  --section-tint: rgba(176,141,87,0.04);

  /* text colour for when placed on gold/accent backgrounds */
  --text-on-accent: #111827;
}

/* --- DARK THEME --- */
[data-theme="dark"] {
  --bg-deep:       #0A1628;
  --bg-card:       #0F1D32;
  --bg-surface:    #132240;
  --gold:          #C9A96E;
  --gold-light:    #DFC08A;
  --gold-dark:     #A8894F;
  --bronze:        #B08D57;
  --text-primary:  #F0EDE6;
  --text-secondary:#8A97A8;
  --text-muted:    #556178;
  --slate:         #3A4A5C;
  --navy:          #1A2744;
  --navy-light:    #243352;
  --border:        rgba(201,169,110,0.12);
  --border-hover:  rgba(201,169,110,0.35);

  --overlay-nav:        rgba(10,22,40,0.85);
  --overlay-menu:       rgba(10,22,40,0.98);
  --overlay-hero:       rgba(10,22,40,0.60);
  --overlay-hero-dense: rgba(10,22,40,0.85);
  --overlay-img:        rgba(10,22,40,0.70);
  --overlay-card-glow:  rgba(201,169,110,0.06);
  --shadow-card:        rgba(0,0,0,0.3);
  --shadow-text:        rgba(0,0,0,0.6);

  --text-on-image:      #F0EDE6;
  --text-on-image-secondary: #8A97A8;

  --grad-surface-start: #132240;
  --grad-surface-end:   #1A2744;
  --grad-card-start:    #0F1D32;
  --grad-card-end:      #132240;

  --section-tint: rgba(26,39,68,0.15);

  --text-on-accent: #0A1628;
}

/* --- THEME TOGGLE BUTTON --- */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
  color: var(--text-muted);
  margin-left: 0.6rem;
  flex-shrink: 0;
}
.theme-toggle:hover {
  border-color: var(--border-hover);
  color: var(--gold);
  background: var(--overlay-card-glow);
}
.theme-toggle svg { width: 16px; height: 16px; }

/* Bigger toggle in mobile menu */
.nav.menu-open .theme-toggle {
  width: 44px;
  height: 44px;
  margin-top: 8px;
}
.nav.menu-open .theme-toggle svg { width: 20px; height: 20px; }

/* Sun icon visible in dark mode, moon visible in light mode */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* --- LIGHT-THEME SPECIFIC OVERRIDES --- */

/* Nav on scroll — solid light background with subtle border */
:root .nav.scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(150,120,62,0.15);
}
:root .nav.menu-open {
  background: var(--overlay-menu);
}

/* Scrolled nav: make links clearly readable */
:root .nav.scrolled .nav-links a {
  color: #3D4A5C;
}
:root .nav.scrolled .nav-links a:hover {
  color: #111827;
}
:root .nav.scrolled .nav-brand {
  color: #8C6E3F;
}
:root .nav.scrolled .nav-brand span {
  color: #3D4A5C;
}
:root .nav.scrolled .nav-lang {
  color: #64748B;
}
:root .nav.scrolled .nav-lang a.active,
:root .nav.scrolled .nav-lang a:hover {
  color: #8C6E3F;
}
:root .nav.scrolled .nav-cta {
  border-color: #8C6E3F;
  color: #8C6E3F;
}
:root .nav.scrolled .nav-cta:hover {
  background: #8C6E3F;
  color: #fff;
}
:root .nav.scrolled .theme-toggle {
  color: #64748B;
  border-color: rgba(150,120,62,0.3);
}
:root .nav.scrolled .theme-toggle:hover {
  color: #8C6E3F;
  border-color: #8C6E3F;
}

/* Mobile menu — all elements must be readable on light background */
:root .nav.menu-open .nav-links a,
:root [data-hero="image"] .nav.menu-open .nav-links a,
:root [data-hero="image"] .nav.menu-open:not(.scrolled) .nav-links a {
  color: var(--text-primary);
}
:root .nav.menu-open .nav-links a:hover,
:root [data-hero="image"] .nav.menu-open .nav-links a:hover {
  color: var(--gold);
}
:root .nav.menu-open .nav-brand,
:root [data-hero="image"] .nav.menu-open .nav-brand {
  color: var(--gold-dark);
}
:root .nav.menu-open .nav-brand span,
:root [data-hero="image"] .nav.menu-open .nav-brand span {
  color: var(--text-secondary);
}
:root .nav.menu-open .nav-lang,
:root [data-hero="image"] .nav.menu-open .nav-lang,
:root [data-hero="image"] .nav.menu-open:not(.scrolled) .nav-lang {
  color: var(--text-muted);
}
:root .nav.menu-open .nav-lang a:hover,
:root .nav.menu-open .nav-lang a.active,
:root [data-hero="image"] .nav.menu-open .nav-lang a:hover,
:root [data-hero="image"] .nav.menu-open .nav-lang a.active {
  color: var(--gold);
}
:root .nav.menu-open .nav-cta,
:root [data-hero="image"] .nav.menu-open .nav-cta,
:root [data-hero="image"] .nav.menu-open:not(.scrolled) .nav-cta {
  border-color: var(--gold);
  color: var(--gold);
}
:root .nav.menu-open .nav-cta:hover {
  background: var(--gold);
  color: var(--text-on-accent);
}
:root .nav.menu-open .theme-toggle,
:root [data-hero="image"] .nav.menu-open .theme-toggle,
:root [data-hero="image"] .nav.menu-open:not(.scrolled) .theme-toggle {
  color: var(--text-muted);
  border-color: var(--border-hover);
}
:root .nav.menu-open .theme-toggle:hover {
  color: var(--gold);
  border-color: var(--gold);
}
:root .nav.menu-open .nav-burger span,
:root [data-hero="image"] .nav.menu-open .nav-burger span {
  background: var(--text-primary);
}

/* ─── TEXT ON IMAGES (light mode) ─── */
/* Hero section text must be light since overlay is dark */
:root .hero-tag,
:root .hero-title,
:root .hero-desc {
  color: var(--text-on-image);
}
:root .hero-title em {
  color: var(--gold-light);
}
:root .hero-desc {
  color: var(--text-on-image-secondary);
}
/* Ghost buttons inside hero need light text */
:root .hero-actions .btn-ghost {
  color: var(--text-on-image-secondary);
}
:root .hero-actions .btn-ghost:hover {
  color: var(--gold-light);
}

/* Nav sitting on hero (before scroll) needs light text — only on pages with image hero */
:root [data-hero="image"] .nav:not(.scrolled) .nav-links a,
:root [data-hero="image"] .nav:not(.scrolled) .nav-brand span {
  color: var(--text-on-image-secondary);
}
:root [data-hero="image"] .nav:not(.scrolled) .nav-brand {
  color: var(--gold-light);
}
:root [data-hero="image"] .nav:not(.scrolled) .nav-links a:hover {
  color: var(--text-on-image);
}
:root [data-hero="image"] .nav:not(.scrolled) .nav-lang {
  color: rgba(255,255,255,0.45);
}
:root [data-hero="image"] .nav:not(.scrolled) .nav-lang a:hover,
:root [data-hero="image"] .nav:not(.scrolled) .nav-lang a.active {
  color: var(--gold-light);
}
:root [data-hero="image"] .nav:not(.scrolled) .nav-cta {
  border-color: var(--gold-light);
  color: var(--gold-light);
}
:root [data-hero="image"] .nav:not(.scrolled) .theme-toggle {
  color: rgba(255,255,255,0.45);
  border-color: rgba(255,255,255,0.15);
}
:root [data-hero="image"] .nav:not(.scrolled) .theme-toggle:hover {
  color: var(--gold-light);
  border-color: var(--gold-light);
}
/* Burger lines need to be light on hero image */
:root [data-hero="image"] .nav:not(.scrolled) .nav-burger span {
  background: rgba(255,255,255,0.85);
}

/* Portfolio card overlays — captions on photos */
:root .portfolio-item h3 {
  color: var(--text-on-image);
}
:root .portfolio-item p {
  color: var(--text-on-image-secondary);
}
:root .portfolio-item-tag {
  color: var(--gold-light);
}

/* Hero scroll indicator */
:root .hero-scroll-text {
  color: rgba(255,255,255,0.4);
}
:root .hero-scroll-line {
  background: rgba(255,255,255,0.2);
}

/* Case study hero — text on photo */
:root .cs-hero-content h1 {
  color: var(--text-on-image);
}
:root .cs-hero-content h1 em {
  color: var(--gold-light);
}
:root .cs-hero-content .cs-sub {
  color: var(--text-on-image-secondary);
}
:root .cs-hero-content .section-tag {
  color: var(--gold-light);
}

/* Gallery captions on photos */
:root .cs-gallery-caption {
  color: var(--text-on-image-secondary);
}

/* Yacht listing status badge on image */
:root .yacht-status {
  background: rgba(10,22,40,0.8);
}

/* Card subtle shadow for light mode */
:root .card,
:root .service-card,
:root .svc-card,
:root [class*="card"] {
  box-shadow: 0 1px 4px var(--shadow-card);
}

/* Dark mode — remove light shadow, rely on glow */
[data-theme="dark"] .card,
[data-theme="dark"] .service-card,
[data-theme="dark"] .svc-card,
[data-theme="dark"] [class*="card"] {
  box-shadow: none;
}

/* Noise overlay — lighter in light mode */
:root .noise::before,
:root .noise::after {
  opacity: 0.015;
}
[data-theme="dark"] .noise::before,
[data-theme="dark"] .noise::after {
  opacity: 0.04;
}

/* --- GLOBAL FONT SIZE BUMP (both themes) --- */
html {
  font-size: 18px;
}

/* Navigation — slightly larger for readability */
.nav-links a       { font-size: 0.82rem !important; }
.nav-cta            { font-size: 0.76rem !important; }
.nav-lang           { font-size: 0.7rem !important; }
.nav-brand          { font-size: 1.6rem !important; }

/* Body text — bump descriptions and paragraphs */
.section p,
.mission-text p,
.page-hero p,
.answer-nugget,
.footer-desc        { font-size: 1rem !important; line-height: 1.8 !important; }

/* Cards and smaller body text */
.value-item p,
.team-info .team-desc,
.cert-card p,
.marina-card p      { font-size: 0.92rem !important; }

/* Service page detail text */
.detail-text,
.detail-text p      { font-size: 1rem !important; }

/* Testimonials — large readable quotes */
.testimonial-quote  { font-size: 1.65rem !important; line-height: 1.7 !important; }
.testimonial-author { font-size: 1rem !important; }
.testimonial-role   { font-size: 0.78rem !important; }

/* Small mono labels */
.section-tag        { font-size: 0.72rem !important; }
.breadcrumb         { font-size: 0.68rem !important; }
.stat-label         { font-size: 0.82rem !important; }
.footer h5          { font-size: 0.78rem !important; }
.footer li a        { font-size: 0.92rem !important; }
.footer-copy        { font-size: 0.68rem !important; }

/* Buttons */
.btn-primary        { font-size: 0.82rem !important; }
.btn-ghost          { font-size: 0.82rem !important; }

/* Tags and badges */
.value-num,
.marina-feat,
.cert-icon,
.team-info p:not(.team-desc),
.last-updated       { font-size: 0.62rem !important; }

/* FAQ text */
.faq-q              { font-size: 1.05rem !important; }
.faq-a, .faq-a p    { font-size: 0.95rem !important; }

/* --- SMOOTH TRANSITION --- */
body,
body *:not(script):not(style):not(svg):not(path) {
  transition: background-color 0.35s ease, color 0.25s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}