/* THEME v28 — Dark Roast (uniform buttons + white links) */

:root{
  --bg:        #1a1512;
  --surface:   #2a201b;
  --surface-2: #342720;
  --border:    #4a3a31;

  --text:      #efe9e6;
  --muted:     #b3a79e;

  --primary:    #a67b5b;
  --primary-600:#8b5e3f;
  --accent:     #d7b272;
  --accent-600: #c79a4d;
  --purple:     #9b7bff;

  --ring:       rgba(214,178,114,.25);
  --shadow-sm:  0 1px 2px rgba(0,0,0,.35);
  --shadow-md:  0 8px 24px rgba(0,0,0,.5);
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;padding:0}
html,body{
  background: var(--bg) !important;
  color: var(--text);
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
}
.page{max-width:980px;margin:0 auto;padding:1rem}

/* ---------- Links ---------- */
a{
  color:var(--text);
  text-decoration:none;
  transition:color .18s ease;
}
a:hover,a:focus{
  color:var(--accent);
}
a:visited{
  color:var(--text);
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding-block:.75rem;
}
.nav{display:flex;gap:.5rem;flex-wrap:wrap}

/* ---------- Buttons ---------- */
a.btn, button.btn, input[type="submit"].btn {
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  min-height:2.6rem;
  padding:.6rem 1rem;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--surface-2);
  color:var(--text);
  font-size:1rem;
  font-weight:500;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
  transition:transform .08s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
a.btn:hover, button.btn:hover, input[type="submit"].btn:hover {
  transform:translateY(-1px);
  background:#3c2f27;
}

/* Primary (bronze) */
.btn-primary{
  background:var(--primary);
  border-color:var(--primary-600);
  color:#1a1512;
}
.btn-primary:hover{background:var(--primary-600);color:#fff}

/* Accent (golden) */
.btn-accent{
  background:var(--accent);
  border-color:var(--accent-600);
  color:#1a1512;
}
.btn-accent:hover{background:var(--accent-600)}

/* Purple highlight */
.btn-purple{
  background:var(--purple);
  border-color:#8365f6;
  color:#fff;
}
.btn-purple:hover{background:#8365f6}

/* ---------- Typography ---------- */
h1,h2,h3{color:var(--text);margin:.6rem 0 .4rem}
.muted{color:var(--muted)}
p{line-height:1.6}

/* ---------- Cards ---------- */
.recipe-card{
  background: var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:1rem;
  margin-bottom:1rem;
  box-shadow: var(--shadow-md);
  transition:transform .18s ease, box-shadow .18s ease;
}
.recipe-card:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 30px rgba(0,0,0,.55);
}

/* ---------- Forms ---------- */
form{display:flex;flex-direction:column;gap:.85rem}
input[type="text"],input[type="number"],input[type="search"],textarea,select{
  width:100%;
  border:1px solid var(--border);
  border-radius:12px;
  padding:.65rem .8rem;
  background:var(--surface-2);
  color:var(--text);
  font-size:1rem;
  transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
input::placeholder,textarea::placeholder{color:#9a8c84}
input:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--accent);
  box-shadow:0 0 0 4px var(--ring);
  background:var(--surface);
}

/* ---------- Lists ---------- */
ul.grocery-list{
  list-style:none;padding:0;margin:0;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-sm);
}
ul.grocery-list li{
  padding:.75rem .9rem;border-bottom:1px solid var(--border);
  display:flex;gap:.5rem;align-items:baseline;color:var(--text);
}
ul.grocery-list li:last-child{border-bottom:none}

/* ---------- Alerts ---------- */
.alert-error{
  color:#ffb4b4;
  background:#432525;
  border:1px solid #a13636;
  border-radius:12px;
  padding:.6rem .8rem;
  margin-bottom:1rem;
}

/* ---------- Footer ---------- */
footer{
  margin-top:2rem;padding-top:1rem;text-align:center;color:var(--muted);
  border-top:1px solid var(--border);font-size:.92rem;
}