/* =====================
   TrailMix Cafe — base.css
   ===================== */
/* CSS Reset (modern minimal) */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html:focus-within{scroll-behavior:smooth}
html,body{height:100%}
body{line-height:1.6; -webkit-font-smoothing:antialiased}
img,picture,video,canvas,svg{display:block; max-width:100%}
input,button,textarea,select{font:inherit}
p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}
#root,#__next{isolation:isolate}

:root{
  --brand:#855E42;
  --bg:#F7EFE8;
  --accent:#2F855A;
  --ink:#2D2A26;
  --muted:#6B645E;
  --radius:16px;
  --shadow: 0 12px 40px rgba(0,0,0,.08);
  --texture: radial-gradient(1000px 400px at 10% -10%, rgba(133,94,66,.06), transparent),
             radial-gradient(800px 300px at 90% 10%, rgba(47,133,90,.05), transparent);
}
body{background:var(--bg); color:var(--ink); font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, 'Helvetica Neue', Arial; }

a{color:inherit; text-decoration:none}
a:focus-visible, button:focus-visible, [role='button']:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:6px}

.container{max-width:1100px; margin-inline:auto; padding:16px}
.container.wide{max-width:1280px}
.visually-hidden{position:absolute; clip:rect(0 0 0 0); clip-path:inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap; border:0; padding:0; margin:-1px}

/* Headings */
h1{font-size:clamp(2rem,3.8vw,3rem); line-height:1.15; margin-bottom:.25rem}
h2{font-size:clamp(1.5rem,2.8vw,2rem); margin-bottom:.25rem}
h3{font-size:1.15rem; margin-bottom:.25rem}
.lede{color:var(--muted)}

/* Buttons */
.btn{display:inline-block; padding:.65rem 1rem; border-radius:999px; font-weight:700; border:1px solid color-mix(in oklab, var(--brand) 25%, black); box-shadow:var(--shadow)}
.btn.primary{background:var(--brand); color:#fff}
.btn.ghost{background:transparent; border:1px solid color-mix(in oklab, var(--ink) 15%, white); color:var(--ink)}
.btn.inline{box-shadow:none}
.btn:active{transform:translateY(1px)}

/* Badges (dietary etc.) */
.badges{display:flex; gap:.5rem; flex-wrap:wrap}
.badge{display:inline-flex; align-items:center; gap:.4rem; padding:.25rem .55rem; border-radius:999px; font-size:.8rem; border:1px solid color-mix(in oklab, var(--ink) 10%, white)}
.badge.vegan{background:color-mix(in oklab, var(--accent) 20%, white); color:#0f3f2a}
.badge.spicy{background:#fff3f0; color:#9a3412; border-color:#fed7aa}
.badge.gf{background:#eef6ff; color:#1e3a8a; border-color:#bfdbfe}

/* Cards & surfaces */
.card{background:#fff; border:1px solid color-mix(in oklab, var(--ink) 10%, white); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem}
.surface{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow) }
.muted{color:var(--muted)}

/* Forms */
form{display:grid; gap:12px; max-width:560px}
label{display:grid; gap:.35rem}
input, textarea, select{background:#fff; color:var(--ink); border:1px solid color-mix(in oklab, var(--ink) 15%, white); border-radius:12px; padding:.6rem .75rem}

/* Tables */
table{width:100%; border-collapse:collapse; font-size:.95rem}
th, td{text-align:left; padding:.6rem .5rem; border-bottom:1px solid color-mix(in oklab, var(--ink) 12%, white)}
th{font-weight:700}

/* Utility */
.center{text-align:center}
.grid{display:grid; gap:1rem}
.flow > * + *{margin-top:.75rem}