/* JUNVO — shared design system (extracted from the agreed wireframes).
   Used by consumer, admin and staff surfaces. */
:root{
  --ink:#171210; --milk:#FFFBF2; --mango:#FFAD00; --amber:#D87A00;
  --sand:#F2E8D2; --warm-gray:#C4BAA8; --muted:#9A8E7C; --muted-gray:#9A8E7C;
  --dark:#211C16; --dark-surface:#211C16; --border:#2E2823; --line:#E7DFCE;
  --r-btn:9px; --r-card:12px; --r:10px;
  --ease-std:cubic-bezier(0.4,0,0.2,1); --ease-gate:cubic-bezier(0.55,0,0.45,1);
  color-scheme: light;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Inter',system-ui,sans-serif; color:var(--ink);}

/* typography */
h1{font-family:'Space Grotesk',sans-serif; font-weight:600;}
h2{font-family:'Space Grotesk',sans-serif; font-weight:600;}
.lead{font-size:14.5px; line-height:1.5; color:#4a423c;}
.muted{color:var(--muted-gray); font-size:12.5px; line-height:1.5;}
.eyebrow{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber); font-weight:700; display:flex; align-items:center; gap:6px;}

/* buttons */
.btn{font-family:'Space Grotesk',sans-serif; font-size:15.5px; font-weight:600; border:0; border-radius:var(--r-btn); padding:13px 18px; cursor:pointer; min-height:46px; transition:transform .12s var(--ease-std), filter .2s; display:inline-flex; align-items:center; justify-content:center; gap:10px;}
.btn:active{transform:scale(.985);}
.btn:disabled{opacity:.5; cursor:not-allowed;}
.btn-primary{background:var(--mango); color:var(--ink);}
.btn-primary:hover:not(:disabled){filter:brightness(1.04);}
.btn-ink{background:var(--ink); color:var(--milk);}
.btn-ghost{background:transparent; color:var(--ink); border:1.5px solid rgba(23,18,16,.22);}
.btn-block{width:100%;}

/* forms */
.field{margin-bottom:14px;}
.field label{display:block; font-size:11.5px; font-weight:600; color:#6b6253; margin-bottom:5px;}
.field input,.field textarea,.field select{width:100%; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:var(--milk); border:1px solid var(--line); border-radius:8px; padding:11px 12px;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none; border-color:var(--mango);}

/* cards / pills */
.card{background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:20px; margin-bottom:16px;}
.pill{display:inline-block; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; padding:3px 9px; border-radius:20px; background:var(--sand); color:#7a6a4e;}
.pill-live{background:#e3f6e8; color:#1d7a3e;}
.pill-draft{background:#eef0f3; color:#6b7280;}

/* toast + spinner (shared) */
.toast{position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--ink); color:var(--milk); padding:11px 20px; border-radius:24px; font-size:13.5px; font-weight:600; opacity:0; pointer-events:none; transition:all .25s; z-index:120;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.spin{width:46px; height:46px; border-radius:50%; border:4px solid rgba(23,18,16,.12); border-top-color:var(--mango); animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* utility */
.spacer{flex:1;}
.hidden{display:none !important;}
.err{color:#b62a2a; font-size:13px;}
.center{text-align:center;}