/* --- Flavor By Design • Global tokens (unchanged) --- */
:root{
  color-scheme: dark;
  --bg:#0B0F14; --panel:#121826; --text:#E6EDF3; --muted:#9FB3C8;
  --border:#263244; --border-strong:#1a2232;
  --accent:#F4B37E; --accent-2:#C08457; --ring:#6CB2FF;
  --shadow:0 10px 30px rgba(0,0,0,.45);
}
:root[data-theme="light"]{
  color-scheme: light;
  --bg:#FAFBFE; --panel:#FFFFFF; --text:#0B1220; --muted:#556781;
  --border:#D6DFEA; --border-strong:#C9D3E0;
  --accent:#C26C3B; --accent-2:#E9A77A; --ring:#2563EB;
  --shadow:0 6px 24px rgba(0,0,0,.12);
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.55 Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:inherit}

/* --- Navigation: upgraded styling --- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: .75rem 1rem;
  background: color-mix(in oklab, var(--panel), transparent 8%);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-strong);
}
.brand{display:flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--text)}
.brand img{width:28px; height:28px}
.brand-text{font-weight:800; letter-spacing:.2px}

.site-nav{
  display:flex; align-items:center; gap:.35rem;
  overflow:auto; padding:.15rem; border-radius:.65rem;
}
/* hide scrollbars when overflowing on mobile */
.site-nav::-webkit-scrollbar{display:none}

.site-nav a{
  position:relative;
  text-decoration:none;
  color:var(--muted);
  font-weight:700;
  padding:.55rem .8rem;
  border-radius:.65rem;
  border:1px solid transparent;
  outline: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .06s ease;
}
.site-nav a:hover{ 
  background: color-mix(in oklab, var(--panel), #fff 2%);
  border-color: var(--border);
  color: var(--text);
}
.site-nav a:active{ transform: translateY(1px); }

/* active page */
.site-nav a[aria-current="page"]{
  color: var(--text);
  background: color-mix(in oklab, var(--accent-2), transparent 85%);
  border-color: color-mix(in oklab, var(--accent-2), transparent 65%);
}
.site-nav a[aria-current="page"]::after{
  content:"";
  position:absolute; left:10px; right:10px; bottom:-8px; height:3px; border-radius:2px;
  background: var(--accent-2);
}

/* keyboard focus */
.site-nav a:focus-visible{
  outline: 3px solid var(--ring);
  outline-offset: 2px;
}

/* theme toggle button to match nav */
.icon-btn{
  border:1px solid var(--border);
  background: color-mix(in oklab, var(--panel), transparent 15%);
  color: var(--text); padding:.5rem .6rem; border-radius:.65rem;
  display:inline-flex; align-items:center; gap:.35rem; cursor:pointer;
}
.icon-btn:hover{ background: color-mix(in oklab, var(--panel), #fff 2%); }
.icon-btn:focus-visible{ outline:3px solid var(--ring); outline-offset:2px; }

/* --- Utilities sometimes referenced elsewhere --- */
.grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:1rem}
.card{background:var(--panel); border:1px solid var(--border-strong); border-radius:.75rem; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow)}
.card img{width:100%; height:180px; object-fit:cover}
.card h3{margin:.75rem 1rem; font-size:1.05rem}
.card .meta{color:var(--muted); margin:0 1rem 1rem}
.card .actions{margin:0 1rem 1rem}
.btn{background:var(--accent-2); color:#0B0F14; padding:.55rem .9rem; border-radius:.55rem; display:inline-block; border:1px solid color-mix(in oklab, var(--accent-2), #000 12%); cursor:pointer; font-weight:700; text-decoration:none}
.btn:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent; border:1px solid var(--border); color:var(--text)}
.footer{margin-top:2rem; padding:1.25rem; color:var(--muted); text-align:center}