/* Shared base for the order, status, and admin pages. Tokens, type, buttons
   and fields match the homepage (index.html keeps its own inline copy).
   Dark mode: --cream turns dark and --plum turns light, so never hardcode
   cream or plum hex values on themed surfaces. */
:root{
  --cream:#FBF3E9;
  --cream-2:#F3E7D8;
  --plum:#2B1230;
  --ink:#241621;
  --berry:#E14C77;
  --berry-text:#B43C5F;
  --frost:#9FD3DE;
  --line: rgba(43,18,48,0.14);
  --muted: rgba(36,22,33,0.72);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 180ms;
  --shadow-hover: 0 8px 22px rgba(43,18,48,0.14);
  --ok:#2F6B4F;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --cream:#1B1220;
    --cream-2:#241A2C;
    --plum:#F3E7D8;
    --ink:#F3E7D8;
    --berry:#F0698C;
    --berry-text:#F0698C;
    --frost:#7FC0CE;
    --line: rgba(243,231,216,0.16);
    --muted: rgba(243,231,216,0.78);
    --shadow-hover: 0 10px 26px rgba(0,0,0,0.45);
    --ok:#8FD1AE;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --cream:#1B1220;
  --cream-2:#241A2C;
  --plum:#F3E7D8;
  --ink:#F3E7D8;
  --berry:#F0698C;
  --berry-text:#F0698C;
  --frost:#7FC0CE;
  --line: rgba(243,231,216,0.16);
  --muted: rgba(243,231,216,0.78);
  --shadow-hover: 0 10px 26px rgba(0,0,0,0.45);
  --ok:#8FD1AE;
  color-scheme:dark;
}

*{box-sizing:border-box;}
:focus-visible{outline:2px solid var(--berry); outline-offset:3px;}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:"Work Sans", ui-sans-serif, system-ui, sans-serif;
  line-height:1.5;
}
h1,h2,h3{
  font-family:"Fraunces", ui-serif, Georgia, serif;
  text-wrap:balance;
  color:var(--plum);
  font-weight:600;
}
a{color:inherit;}
img{display:block; max-width:100%;}
[hidden]{display:none !important;}
.visually-hidden{
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; margin:-1px; padding:0; border:0;
}
.skip-link{position:absolute; left:12px; top:-60px; z-index:200; background:var(--plum); color:var(--cream); padding:10px 16px; border-radius:999px; text-decoration:none; font-weight:600;}
.skip-link:focus{top:12px;}

/* ---------- top bar ---------- */
.topbar-shell{position:sticky; top:0; z-index:60; background:var(--cream); border-bottom:1px solid var(--line);}
.topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; max-width:1080px; margin:0 auto; padding:14px 28px;}
.mark{font-family:"Fraunces", serif; font-weight:700; font-size:1.05rem; letter-spacing:0.08em; color:var(--plum); text-decoration:none; padding:10px 0;}
.mark .dot{color:var(--berry);}
.topbar-links{display:flex; align-items:center; gap:4px; flex-wrap:wrap; justify-content:flex-end;}
.topbar-links a, .topbar-links button{
  font:inherit; font-size:0.9rem; font-weight:500; color:var(--plum); text-decoration:none; background:transparent; border:none; cursor:pointer;
  padding:12px 12px; border-radius:999px; min-height:44px; display:inline-flex; align-items:center;
  transition:background-color var(--dur) var(--ease-out);
}
.topbar-links a:hover, .topbar-links button:hover{background:color-mix(in srgb, var(--plum) 7%, transparent);}
.topbar-links a[aria-current="page"]{text-decoration:underline; text-decoration-color:var(--berry); text-decoration-thickness:2px; text-underline-offset:6px;}
@media (max-width:640px){
  .topbar{padding:6px 16px; flex-wrap:wrap; row-gap:0;}
  .topbar-links{flex-wrap:nowrap; overflow-x:auto; margin-right:-12px; scrollbar-width:none;}
  .topbar-links a, .topbar-links button{padding:12px 10px; white-space:nowrap;}
}

.wrap{max-width:1080px; margin:0 auto; padding:0 28px;}
@media (max-width:640px){ .wrap{padding:0 16px;} }

.eyebrow{font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--berry-text); font-weight:600; margin:0 0 10px;}
.muted{color:var(--muted);}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 24px; min-height:44px; border-radius:999px;
  font:inherit; font-size:0.92rem; font-weight:600; text-decoration:none; text-align:center;
  border:1px solid transparent; cursor:pointer;
  transition:background-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out),
    border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.btn-primary{background:var(--plum); color:var(--cream);}
.btn-primary:hover{background:var(--berry-text); color:var(--cream);}
.btn-ghost{border-color:var(--line); color:var(--plum); background:transparent;}
.btn-ghost:hover{border-color:var(--plum); background:color-mix(in srgb, var(--plum) 6%, transparent);}
.btn-secondary{border:2px solid var(--plum); color:var(--plum); background:transparent;}
.btn-secondary:hover{background:var(--plum); color:var(--cream);}
.btn-danger{border-color:color-mix(in srgb, var(--berry-text) 55%, transparent); color:var(--berry-text); background:transparent;}
.btn-danger:hover{background:color-mix(in srgb, var(--berry) 12%, transparent); border-color:var(--berry-text);}
.btn-small{padding:9px 16px; font-size:0.85rem;}
@media (hover:hover){
  .btn-primary:hover, .btn-secondary:hover{transform:translateY(-1px); box-shadow:var(--shadow-hover);}
}
.btn:active{transform:translateY(0) scale(0.98); box-shadow:none;}
.btn[disabled], .btn[aria-disabled="true"]{opacity:0.55; cursor:not-allowed; pointer-events:none;}
.btn.is-loading{color:transparent !important; pointer-events:none; position:relative;}
.btn.is-loading::after{
  content:""; position:absolute; width:16px; height:16px; border-radius:50%;
  border:2px solid var(--cream); border-top-color:transparent; animation:btn-spin 0.7s linear infinite;
}
.btn-ghost.is-loading::after, .btn-secondary.is-loading::after, .btn-danger.is-loading::after{border-color:var(--plum); border-top-color:transparent;}
@keyframes btn-spin{ to{ transform:rotate(360deg); } }
.text-link{
  color:var(--plum); font-weight:600; font-size:0.9rem; text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
  background:none; border:none; padding:12px 4px; cursor:pointer; font-family:inherit; min-height:44px; display:inline-flex; align-items:center;
}
.text-link:hover{color:var(--berry-text); text-decoration-thickness:2px;}

/* ---------- fields ---------- */
.field{display:flex; flex-direction:column; gap:6px; margin:0 0 16px; min-width:0;}
.field > label, .field > .label{font-size:0.85rem; font-weight:500; color:var(--plum);}
.field .hint{font-size:0.8rem; color:var(--muted); margin:0;}
.field .optional{font-weight:400; color:var(--muted);}
.field input, .field textarea, .field select{
  font:inherit; font-size:1rem; width:100%;
  padding:11px 14px; min-height:48px;
  border-radius:12px; border:1px solid var(--line);
  background:var(--cream-2); color:var(--ink);
  transition:border-color var(--dur) var(--ease-out);
}
.field textarea{min-height:88px; resize:vertical;}
.field input:hover, .field textarea:hover, .field select:hover{border-color:color-mix(in srgb, var(--plum) 35%, transparent);}
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible{outline:2px solid var(--berry); outline-offset:1px;}
.field [aria-invalid="true"]{border-color:var(--berry-text);}
.field-error{font-size:0.82rem; color:var(--berry-text); margin:0; font-weight:500;}
.field-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:0 14px;}

.alert{border-radius:14px; padding:12px 16px; font-size:0.92rem; margin:0 0 18px;}
.alert-error{background:color-mix(in srgb, var(--berry) 14%, transparent); color:var(--berry-text);}
.alert-error ul{margin:6px 0 0; padding-left:18px;}
.alert-error a{color:inherit; font-weight:600;}
.alert-info{background:color-mix(in srgb, var(--frost) 28%, transparent); color:var(--plum);}
.alert-ok{background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--plum);}

.card{background:var(--cream-2); border:1px solid var(--line); border-radius:20px; padding:22px 22px;}

/* ---------- dialog (native <dialog>) ---------- */
dialog.confirm{
  border:1px solid var(--line); border-radius:22px; padding:26px 24px 22px; width:min(440px, calc(100vw - 32px));
  max-height:calc(100dvh - 32px); overflow:auto; background:var(--cream); color:var(--ink); box-shadow:0 20px 60px rgba(0,0,0,0.25);
}
dialog.confirm::backdrop{background:rgba(36,22,33,0.5);}
dialog.confirm h2{margin:0 0 8px; font-size:1.3rem;}
dialog.confirm p{margin:0 0 16px; color:var(--muted);}
.dialog-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:8px;}

footer.mini{padding:40px 28px 56px; text-align:center; font-size:0.85rem; color:var(--muted);}
footer.mini a{color:var(--plum);}