@import url('https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@3.24.0/dist/tabler-icons.min.css');

/* ============================================================
   Wanderlust Bartender — shared theme (dark default + light)
   Single source of truth for tokens, nav, buttons, chips, footer.
   See design.md for documentation.
   ============================================================ */

:root{
  color-scheme: dark;
  --bg:#05080b; --surface:#0c1620; --surface-2:#10202b;
  --hairline:rgba(255,255,255,.09); --hairline-2:rgba(255,255,255,.14);
  --text:#f4f6f7; --text-dim:#c2c8cc; --text-mute:#8b949b;
  --accent:#E5B257;            /* gold for text/links/labels */
  --gold:#C9892F; --gold-2:#E5B257; --gold-ink:#231405;
  --gold-soft:rgba(201,137,47,.16); --gold-line:rgba(229,178,87,.45);
  --cat-country:#5DCAA5; --cat-fruit:#EF9F27; --cat-herb:#8FBF6B; --cat-exotic:#AFA9EC; --cat-sourcing:#FAC775;
  --band:#143a33;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --font-display:'Fraunces', Georgia, serif;
  --font-serif:'Fraunces', Georgia, serif;
  --font-sans:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

[data-theme="light"]{
  color-scheme: light;
  --bg:#faf6ee; --surface:#ffffff; --surface-2:#f3ecdf;
  --hairline:rgba(24,28,32,.12); --hairline-2:rgba(24,28,32,.2);
  --text:#1a232b; --text-dim:#4c5862; --text-mute:#79838b;
  --accent:#9a6512;
  --gold:#C9892F; --gold-2:#b07a1e; --gold-ink:#231405;
  --gold-soft:rgba(201,137,47,.14); --gold-line:rgba(176,122,30,.5);
  --cat-country:#1f7a6d; --cat-fruit:#b0631a; --cat-herb:#4f7a3a; --cat-exotic:#5e4aa0; --cat-sourcing:#9a6512;
  --band:#d9efe7;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{overflow-x:hidden}
body{font-family:var(--font-sans);background:var(--bg);color:var(--text);line-height:1.55;
  -webkit-font-smoothing:antialiased;transition:background .3s ease,color .3s ease}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
.serif{font-family:var(--font-display)}

/* ---- Shared nav ---- */
.site-nav{display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem 2.5rem;border-bottom:1px solid var(--hairline);position:relative;z-index:50}
.site-nav .left{display:flex;align-items:center;gap:2rem}
.site-nav .logo{font-weight:600;font-size:1.02rem;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;color:var(--text)}
.site-nav .logo b{color:var(--gold);font-weight:600}
.site-nav .nav-links{display:flex;gap:1.5rem}
.site-nav .nav-links a{font-size:.82rem;color:var(--text-dim);transition:color .2s}
.site-nav .nav-links a:hover,.site-nav .nav-links a.active{color:var(--text)}
.site-nav .actions{display:flex;align-items:center;gap:.9rem}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:999px;border:1px solid var(--hairline-2);background:transparent;color:var(--text-dim);
  cursor:pointer;font-size:17px;transition:all .2s}
.theme-toggle:hover{color:var(--text);border-color:var(--gold-line)}
.btn-enter{font-size:.8rem;color:var(--text);border:1px solid var(--gold-line);
  padding:.5rem 1.1rem;border-radius:var(--r-sm);transition:all .2s}
.btn-enter:hover{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}

/* ---- Buttons ---- */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:inherit;font-weight:600;
  font-size:.88rem;border-radius:var(--r-sm);padding:.82rem 1.5rem;cursor:pointer;border:1px solid transparent;
  min-height:44px;transition:background .2s,transform .1s}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--gold);color:var(--gold-ink)}
.btn-primary:hover{background:var(--gold-2)}
.btn-ghost{background:transparent;border-color:var(--gold-line);color:var(--text)}
.btn-ghost:hover{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}

/* ---- Chips / tags ---- */
.atlas-chip{font-size:.85rem;padding:.5rem .9rem;border-radius:999px;border:1px solid var(--gold-line);
  color:var(--accent);display:inline-flex;align-items:center;gap:7px;transition:all .15s}
.atlas-chip:hover{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.tag{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}

/* ---- Category colors (single source) ---- */
.cat-country{color:var(--cat-country)} .cat-fruit{color:var(--cat-fruit)}
.cat-herb{color:var(--cat-herb)} .cat-exotic{color:var(--cat-exotic)} .cat-sourcing{color:var(--cat-sourcing)}

/* ---- Footer ---- */
.site-footer{border-top:1px solid var(--hairline);padding:1.6rem 0 3rem;color:var(--text-mute);font-size:.8rem;margin-top:2.5rem}
.site-footer .wrap{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between}

@media (max-width:760px){
  .site-nav{padding:1rem 1.25rem}
  .site-nav .nav-links{display:none}
}