/* ============================
   DARK MODE — "night tank"
   Activated by [data-theme="dark"] on <html>.

   The light theme's deep-teal primary (#0B6E75) only reached 2.9:1
   against the old dark surface, so buttons, links and active states
   sank into the background. Dark mode now reads like a tank lit from
   above at night: deep-ocean navy surfaces with a clear aqua primary
   (#3FC1D6, 8.4:1 on the page background). Filled buttons flip to
   dark text on aqua so their labels stay legible (7.9:1).
   ============================ */
[data-theme="dark"]{
  /* Brand remap */
  --clr-primary:      #3FC1D6;
  --clr-primary-rgb:  63,193,214;
  --clr-secondary:    #5ED3C4;
  --clr-accent:       #8BE6F2;
  --clr-accent-rgb:   139,230,242;
  --clr-deep:         #04121D;
  --clr-deep-rgb:     4,18,29;
  --clr-light:        #0F2A3F;
  --clr-dark-bg:      #061826;

  --on-primary:        #03202B;
  --btn-primary-hover: #8BE6F2;
  --on-primary-hover:  #03202B;

  /* Surfaces */
  --surface-0: var(--clr-dark-bg);
  --surface-1: #0B2233;
  --surface-2: #0D2739;
  --surface-glass: rgba(11,34,51,.6);
  --border-soft: rgba(139,230,242,.10);
  --border-strong: rgba(139,230,242,.2);

  /* Text */
  --text-primary: #E8F6FA;
  --text-secondary: #A8C4CE;
  --text-muted: #7E9EAA;

  /* Status colours lifted so they pass on dark cards */
  --status-compatible: #4FC98A;
  --status-caution: #E6B04E;
  --status-avoid: #EE8A7C;

  --shadow-soft: 0 24px 55px -25px rgba(0,0,0,.7);
  --shadow-lift: 0 34px 70px -20px rgba(0,0,0,.75);
  --shadow-tight: 0 10px 22px -12px rgba(0,0,0,.6);
}

[data-theme="dark"] body{ background:var(--surface-0); }

[data-theme="dark"] .site-header{ background:rgba(6,24,38,.9); border-color:var(--border-soft); }
[data-theme="dark"] .topbar{ background:#030E17; }
[data-theme="dark"] .page-hero{ background:linear-gradient(180deg, #0C2638, var(--surface-0)); }
[data-theme="dark"] .glass-panel{ background:rgba(6,24,38,.6); border-color:var(--border-soft); }

/* Nav + active states use the brighter primary */
[data-theme="dark"] .main-nav a:hover,
[data-theme="dark"] .main-nav .nav-link:hover,
[data-theme="dark"] .main-nav a.active,
[data-theme="dark"] .nav-item.is-open > .nav-link{ color:var(--clr-primary); background:rgba(var(--clr-primary-rgb),.1); }
[data-theme="dark"] .home-card.is-current{ background:rgba(var(--clr-primary-rgb),.12); }

/* Journey numbers and outline buttons */
[data-theme="dark"] .journey-num{ background:var(--surface-1); border-color:var(--clr-primary); color:var(--clr-primary); }
[data-theme="dark"] .btn-outline{ color:var(--text-primary); border-color:var(--border-strong); }
[data-theme="dark"] .btn-outline:hover{ color:var(--clr-primary); border-color:var(--clr-primary); }

/* Consultation card: keep it distinct from the page instead of a
   teal slab that clashed with the navy surfaces */
[data-theme="dark"] .consult-card{ background:linear-gradient(120deg, #0E2C42, #0A3346 65%); border:1px solid var(--border-soft); }
[data-theme="dark"] .consult-media::before{ background:linear-gradient(90deg, #0E2C42 0%, transparent 32%); }

/* Footer sits a step darker than the page */
[data-theme="dark"] .site-footer{ background:var(--clr-deep); border-top:1px solid var(--border-soft); }

/* Status badges off-photo */
[data-theme="dark"] .badge-stock{ background:rgba(79,201,138,.14); }
[data-theme="dark"] .badge-limited{ background:rgba(230,176,78,.14); }
[data-theme="dark"] .badge-soldout{ background:rgba(238,138,124,.14); }
/* …but labels sitting on photos keep the solid light pill in both themes */
[data-theme="dark"] .media .badge,
[data-theme="dark"] .h2-sp-media .badge{ background:rgba(255,255,255,.96); color:#0C2B31; }

[data-theme="dark"] .skeleton-block{
  background:linear-gradient(90deg, var(--surface-2) 25%, rgba(255,255,255,.06) 37%, var(--surface-2) 63%);
  background-size:400% 100%;
}

[data-theme="dark"] .map-placeholder{
  background: repeating-linear-gradient(45deg, var(--surface-2) 0 12px, var(--surface-0) 12px 24px);
}

[data-theme="dark"] .form-field input,
[data-theme="dark"] .form-field select,
[data-theme="dark"] .form-field textarea{
  background:var(--surface-1);
  color:var(--text-primary);
}

[data-theme="dark"] .pagination button{ color:var(--text-primary); }
[data-theme="dark"] .pagination button.active{ color:var(--on-primary); }