/* Global theme tokens — tweak once, everywhere updates */
:root{
  --bg:            #F5EFE6;   /* warm sand background */
  --ink:           #1E212B;   /* primary text */
  --muted-ink:     #4B5162;
  --card:          #FFFFFF;
  --card-ink:      #1F232B;
  --border:        #E6E1D9;

  --accent:        #22C55E;   /* your green CTA */
  --accent-ink:    #0A2916;
  --accent-weak:   color-mix(in srgb, var(--accent) 22%, white);

  --brand-700:     #3A3F47;   /* top bar slate */
  --brand-800:     #2C3138;

  --radius-lg:     18px;
  --shadow-card:   0 10px 30px rgba(0,0,0,.08);
  --shadow-hero:   0 22px 50px rgba(0,0,0,.18);
}

/* Base surfaces */
html,body{background:var(--bg); color:var(--ink)}
section, .container, .stack{color:var(--ink)}
.card{background:var(--card); color:var(--card-ink); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-card)}

/* Top bar */
.topbar, header[role="banner"]{
  background:linear-gradient(180deg,var(--brand-700),var(--brand-800));
  color:#fff;
  backdrop-filter:saturate(120%) blur(6px);
}

/* Buttons */
a[href*="book"], .btn-primary, .button.primary, button.primary{
  background:var(--accent)!important; color:var(--accent-ink)!important; border:0!important;
}
a[href*="book"]:hover, .btn-primary:hover, .button.primary:hover, button.primary:hover{
  filter:brightness(0.95);
}
.btn, .button{border-radius:999px;}

/* Secondary buttons */
.btn-secondary, .button.secondary{
  background:var(--accent-weak)!important; color:var(--accent-ink)!important; border:0!important;
}

/* Chips / badges */
.badge, .chip, .pill{
  background:var(--card); color:var(--muted-ink); border:1px solid var(--border); border-radius:999px;
}

/* Hero card polish */
.hero .hero__card, .hero .card{
  background:color-mix(in srgb, var(--brand-800) 15%, transparent);
  color:#fff;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow-hero);
  border-radius:var(--radius-lg);
}

/* Links */
a{color:color-mix(in srgb, var(--brand-800) 40%, var(--accent) 60%)}
a:hover{opacity:.9}

/* Mobile drawer (uses your latest drawer structure) */
#mobile-drawer panel{background:var(--brand-800); color:#fff}
#mobile-drawer a{color:#fff}
#mobile-drawer a:hover{opacity:.85}

/* Respect dark preference automatically if the OS is dark */
@media (prefers-color-scheme: dark){
  :root{
    --bg:#111418; --ink:#EDEFF2; --muted-ink:#C8CED8; --card:#171B21; --card-ink:#F5F8FA; --border:#242A33;
    --brand-700:#1F2530; --brand-800:#171C24;
    --accent:#22C55E; --accent-ink:#06150C; --accent-weak:color-mix(in srgb, var(--accent) 18%, #222);
  }
}