/* Theme tokens (PNW inspired) */
:root{
  /* light */
  --bg: #F4F7F6;            /* coastal mist */
  --surface: #FFFFFF;
  --ink: #132A22;           /* evergreen ink */
  --muted: #5B6F66;         /* cedar bark */
  --brand: #285C4D;         /* deep evergreen */
  --accent: #9FC2B2;        /* sage */
  --ring: #C9DAD4;
  --glass: rgba(40,92,77,0.08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg: #0A1F1A;          /* forest night */
    --surface: #0F2A24;
    --ink: #EAF1EE;
    --muted: #A7B7B0;
    --brand: #6CC0A7;       /* moonlit alpine lake */
    --accent: #87A39B;      /* foggy sage */
    --ring: #24413A;
    --glass: rgba(0,0,0,0.35);
    color-scheme: dark;
  }
}

/* Manual override using [data-theme] */
html[data-theme="light"]{
  --bg: #F4F7F6; --surface:#FFFFFF; --ink:#132A22; --muted:#5B6F66; --brand:#285C4D; --accent:#9FC2B2; --ring:#C9DAD4; --glass:rgba(40,92,77,0.08); color-scheme: light;
}
html[data-theme="dark"]{
  --bg: #0A1F1A; --surface:#0F2A24; --ink:#EAF1EE; --muted:#A7B7B0; --brand:#6CC0A7; --accent:#87A39B; --ring:#24413A; --glass:rgba(0,0,0,0.35); color-scheme: dark;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}

/* Accessibility */
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{position:fixed; left:1rem; top:1rem; width:auto; height:auto; padding:.5rem .75rem; background:var(--surface); color:var(--ink); border-radius:.5rem; outline:2px solid var(--ring)}

.hero{
  position:relative;
  min-height:92svh;
  display:grid;
  place-items:center;
  overflow:hidden;
}
.hero-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:contrast(1.05) saturate(1.05);
}
.overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,31,26,0.2) 0%, rgba(10,31,26,0.55) 55%, rgba(10,31,26,0.85) 100%);
}
.hero-content{
  position:relative; z-index:1; text-align:center; padding:clamp(16px, 3vw, 32px); max-width:980px; margin-inline:auto;
}
.topbar{display:flex; align-items:center; justify-content:center; gap:.75rem; flex-wrap:wrap}
.couple{font-family:"Playfair Display", serif; font-weight:700; font-size:clamp(2.2rem, 7vw, 4.75rem); margin:0}
.theme-toggle{margin-left:4px; display:inline-grid; place-items:center; width:42px; height:42px; border-radius:999px; border:1px solid color-mix(in oklab, var(--ink) 20%, transparent); background:color-mix(in oklab, var(--surface) 80%, transparent); color:var(--ink); cursor:pointer}
.theme-toggle:hover{border-color:color-mix(in oklab, var(--ink) 35%, transparent)}
.icon{width:22px; height:22px; fill:currentColor}
.tagline{margin:.4rem 0 .8rem; color:var(--muted); font-weight:300; letter-spacing:.02em}
.date{font-size:1.1rem; color:var(--accent); margin:0 0 1rem}
.countdown{display:flex; gap:.6rem; justify-content:center; align-items:center; margin:1rem auto 1.25rem; flex-wrap:wrap}
.time{display:grid; place-items:center; background:var(--glass); backdrop-filter:saturate(1.1) blur(2px); border:1px solid color-mix(in oklab, var(--ink) 12%, transparent); padding:.65rem .9rem; border-radius:12px; min-width:86px}
.time span{font-size:clamp(1.6rem, 6vw, 2.6rem); font-weight:700}
.time small{font-size:.72rem; color:var(--muted); letter-spacing:.12em; text-transform:uppercase}
.cta-row{display:flex; gap:.65rem; justify-content:center; flex-wrap:wrap}
.btn{--_bg:transparent; --_ink:var(--ink); --_bd:color-mix(in oklab, var(--ink) 18%, transparent); appearance:none; display:inline-flex; align-items:center; gap:.5rem; padding:.7rem 1rem; border-radius:999px; border:1px solid var(--_bd); color:var(--_ink); background:var(--_bg); text-decoration:none; font-weight:600}
.btn.primary{--_bg:var(--brand); --_bd:transparent; color:#0C1B17}
.btn.primary:where(html[data-theme="dark"] *){color:#0a1f1a}
.btn.ghost:hover{border-color:color-mix(in oklab, var(--ink) 35%, transparent)}
.section{max-width:900px; margin:0 auto; padding:clamp(2rem, 5vw, 3.5rem) 1.25rem}
.section.muted{background:linear-gradient(180deg, color-mix(in oklab, var(--surface) 92%, transparent), color-mix(in oklab, var(--surface) 70%, transparent))}
.section h2{font-family:"Playfair Display", serif; font-size:clamp(1.4rem, 3.3vw, 2.1rem); margin:0 0 .5rem}
.footer{padding:2rem 1rem; text-align:center; color:var(--muted); font-size:.95rem; border-top:1px solid color-mix(in oklab, var(--ink) 10%, transparent)}

/* Mobile improvements */
@media (max-width: 480px){
  .time{min-width:72px; padding:.55rem .7rem}
}

@media (prefers-reduced-motion: no-preference){
  .hero-content{animation:fadeUp .9s ease-out both .1s}
  @keyframes fadeUp{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:translateY(0)}}
}