/* ============================================================
   Yumi — Component library (v3.0)
   Foundation primitives reused by public.css and admin.css.
   ============================================================ */

/* ============================================================
   Buttons — primary / secondary / danger / ghost · sm / md / lg
   ============================================================ */
.btn{
  --btn-h: 40px;
  --btn-px: 18px;
  --btn-fs: var(--text-base);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--btn-h);padding:0 var(--btn-px);
  font-family:var(--font-body);font-size:var(--btn-fs);
  font-weight:var(--weight-medium);letter-spacing:.005em;
  border:1px solid var(--color-line);border-radius:var(--radius-md);
  background:var(--color-bg);color:var(--color-ink);
  cursor:pointer;white-space:nowrap;
  transition:background var(--dur-fast) var(--ease-smooth),
             border-color var(--dur-fast) var(--ease-smooth),
             color var(--dur-fast) var(--ease-smooth),
             transform var(--dur-fast) var(--ease-snappy),
             box-shadow var(--dur-fast) var(--ease-smooth);
}
.btn:hover{background:var(--color-surface);border-color:#d4d3d0;text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}

.btn--sm{--btn-h:32px;--btn-px:12px;--btn-fs:var(--text-sm)}
.btn--lg{--btn-h:52px;--btn-px:28px;--btn-fs:var(--text-md);border-radius:var(--radius-lg)}

.btn--primary{
  background:var(--color-accent-deep);color:#fff;border-color:var(--color-accent-deep);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(61,107,84,.25);
}
.btn--primary:hover{
  background:#345d4a;border-color:#345d4a;
  transform:translateY(-1px);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 6px 14px rgba(61,107,84,.30);
}

.btn--danger{background:#fff;color:var(--color-danger);border-color:var(--color-danger-line)}
.btn--danger:hover{background:var(--color-danger-bg);border-color:#fca5a5}
.btn--danger-solid{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}
.btn--danger-solid:hover{background:#b91c1c;border-color:#b91c1c}

.btn--ghost{background:transparent;border-color:transparent;color:var(--color-ink-2)}
.btn--ghost:hover{background:var(--color-surface);color:var(--color-ink)}

.btn--full{width:100%}

/* Velvet — for public hero & sticky CTA. Use sparingly. */
.btn--velvet{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,#9bd2b3 0%,var(--color-accent) 60%,var(--color-accent-strong) 100%);
  border:0;color:#fff;border-radius:var(--radius-2xl);
  height:52px;padding:0 28px;font-size:var(--text-md);font-weight:var(--weight-medium);
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
             0 1px 2px rgba(0,0,0,.22),
             0 6px 14px rgba(0,0,0,.22),
             0 12px 28px rgba(94,157,125,.32);
  transition:transform var(--dur-slow) var(--ease-snappy),
             box-shadow var(--dur-slow) var(--ease-snappy),
             filter var(--dur-slow) var(--ease-smooth);
}
.btn--velvet::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.5) 48%,transparent 66%);
  background-size:250% 100%;background-position:200% 0;
  mix-blend-mode:overlay;opacity:.9;
  animation:btnSheen 4.6s ease-in-out infinite;
}
@keyframes btnSheen{
  0%,60%{background-position:200% 0}
  80%{background-position:-50% 0}
  100%{background-position:-50% 0}
}
.btn--velvet:hover{transform:translateY(-3px);filter:saturate(1.08);box-shadow:var(--shadow-velvet)}
.btn--velvet:active{transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.btn--velvet::after{animation:none}}

/* ============================================================
   Form controls — single primitive
   ============================================================ */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:var(--space-4)}
.field__label,
label.field{display:block;margin-bottom:6px}
.field__label{
  font-size:var(--text-sm);font-weight:var(--weight-medium);
  color:var(--color-ink-2);letter-spacing:.005em;
}
.field__help{font-size:var(--text-xs);color:var(--color-ink-3);margin-top:2px}
.field__error{font-size:var(--text-xs);color:var(--color-danger);margin-top:2px}
.field--inline{flex-direction:row;align-items:center;gap:12px}

.input,
input[type="text"],input[type="email"],input[type="password"],input[type="tel"],
input[type="url"],input[type="number"],input[type="date"],input[type="time"],
input[type="search"],select,textarea{
  display:block;width:100%;
  height:40px;padding:0 12px;
  font-family:var(--font-body);font-size:var(--text-md);
  color:var(--color-ink);background:var(--color-bg);
  border:1px solid var(--color-line);border-radius:var(--radius-md);
  outline:none;
  transition:border-color var(--dur-fast) var(--ease-smooth),
             box-shadow var(--dur-fast) var(--ease-smooth);
}
textarea{height:auto;min-height:88px;padding:10px 12px;line-height:var(--leading-base);resize:vertical}
select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b6b6b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px;
  padding-right:36px;
}
.input:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--color-accent-strong);box-shadow:var(--shadow-focus);
}
/* Phase 41 Plan 05 (a11y, WCAG 2.4.7): inputs reset native outline:none above
   for design control via box-shadow; add an explicit :focus-visible outline as
   a keyboard-only fallback so the ring is always perceivable. */
.input:focus-visible,
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--color-accent-strong);
  outline-offset:2px;
}
/* Interactive defaults — buttons, links, slot pills, language switcher pills
   all gain a visible :focus-visible ring (paired with any outline:none in
   downstream files). */
.btn:focus-visible,
.slot:focus-visible,
.public-nav a:focus-visible,
.topnav__lang a:focus-visible{
  outline:2px solid var(--color-accent-strong, currentColor);
  outline-offset:2px;
}
.input--invalid,input[aria-invalid="true"]{border-color:var(--color-danger)}
.input--invalid:focus,input[aria-invalid="true"]:focus{box-shadow:0 0 0 3px var(--color-danger-bg)}
.input::placeholder,textarea::placeholder{color:var(--color-ink-4)}

/* Checkbox / radio */
.checkbox,.radio{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;
  font-size:var(--text-base);color:var(--color-ink-2);
}
.checkbox input,.radio input{
  width:18px;height:18px;accent-color:var(--color-accent-strong);cursor:pointer;
}

/* Inline-pill segmented control (e.g. fulfillment toggle) */
.segmented{
  display:inline-flex;background:var(--color-surface);
  border:1px solid var(--color-line);border-radius:var(--radius-pill);padding:4px;gap:2px;
}
.segmented__opt{
  display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 16px;border-radius:var(--radius-pill);
  font-size:var(--text-sm);color:var(--color-ink-2);
  transition:background var(--dur-fast) var(--ease-smooth),color var(--dur-fast) var(--ease-smooth);
}
.segmented__opt[aria-pressed="true"],.segmented__opt.is-active{
  background:var(--color-accent-deep);color:#fff;
}

/* Form row layout helpers */
.row{display:flex;gap:var(--space-4);flex-wrap:wrap}
.row > .field{flex:1;min-width:160px}
.actions{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.actions--end{justify-content:flex-end}

/* Save-bar (sticky bottom for edit pages) */
.save-bar{
  position:sticky;bottom:0;z-index:var(--z-sticky);
  display:flex;justify-content:flex-end;gap:var(--space-2);
  background:var(--color-bg);border-top:1px solid var(--color-line);
  padding:var(--space-3) var(--space-5);margin:var(--space-6) -24px -24px;
}

/* ============================================================
   Cards — base, stat, list, photo
   ============================================================ */
.card{
  background:var(--color-bg);
  border:1px solid var(--color-line);border-radius:var(--radius-lg);
  padding:var(--space-5);box-shadow:var(--shadow-1);
}
.card__title{font-family:var(--font-body);font-size:var(--text-lg);font-weight:var(--weight-medium);margin-bottom:var(--space-3);letter-spacing:0}
.card__meta{font-size:var(--text-sm);color:var(--color-ink-3)}

.stat-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--space-4);
}
.stat{
  position:relative;background:var(--color-bg);
  border:1px solid var(--color-line);border-radius:var(--radius-lg);
  padding:var(--space-5);overflow:hidden;
  transition:transform var(--dur-base) var(--ease-snappy),
             box-shadow var(--dur-base) var(--ease-snappy),
             border-color var(--dur-base) var(--ease-smooth);
}
.stat::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--color-accent);opacity:.7;
}
.stat:hover{transform:translateY(-2px);border-color:#d4d3d0;box-shadow:var(--shadow-2)}
.stat--warn{background:var(--color-warn-bg);border-color:var(--color-warn-line)}
.stat--warn::before{background:var(--color-warn)}
.stat--danger{background:var(--color-danger-bg);border-color:var(--color-danger-line)}
.stat--danger::before{background:var(--color-danger)}
.stat__num{
  font-family:var(--font-display);font-size:var(--text-3xl);
  font-weight:var(--weight-light);line-height:1;letter-spacing:-0.02em;
  color:var(--color-ink);font-variant-numeric:tabular-nums;
}
.stat__label{
  font-size:var(--text-xs);color:var(--color-ink-3);margin-top:var(--space-3);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;font-weight:var(--weight-semibold);
}
.stat__delta{font-size:var(--text-xs);color:var(--color-ok);margin-top:2px;font-weight:var(--weight-medium)}
.stat__delta--down{color:var(--color-danger)}

/* Photo card (landing, gallery, menu item) */
.photo-card{
  display:block;background:var(--color-recessed);
  border-radius:var(--radius-xl);overflow:hidden;
  border:1px solid rgba(15,30,22,.06);
  box-shadow:var(--shadow-2);
  transition:transform var(--dur-base) var(--ease-snappy),
             box-shadow var(--dur-base) var(--ease-snappy),
             border-color var(--dur-base) var(--ease-smooth);
}
.photo-card:hover{
  transform:translateY(-2px);border-color:rgba(94,157,125,.22);
  box-shadow:var(--shadow-3);text-decoration:none;
}
.photo-card__img{aspect-ratio:4/3;background:var(--color-recessed);background-size:cover;background-position:center}
.photo-card__body{padding:var(--space-4) var(--space-5) var(--space-5)}
.photo-card__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-regular);letter-spacing:var(--tracking-heading);margin-bottom:6px;color:var(--color-ink)}
.photo-card__desc{font-size:var(--text-base);color:var(--color-ink-3);line-height:var(--leading-base)}
.photo-card__price{margin-top:var(--space-3);font-size:var(--text-md);font-weight:var(--weight-medium);font-variant-numeric:tabular-nums}

/* ============================================================
   Data tables — one primitive for every list
   ============================================================ */
.table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--color-bg);
  border:1px solid var(--color-line);border-radius:var(--radius-lg);
  overflow:hidden;font-size:var(--text-sm);
}
.table th{
  text-align:left;padding:10px 14px;
  background:var(--color-surface);
  border-bottom:1px solid var(--color-line);
  color:var(--color-ink-3);font-weight:var(--weight-semibold);
  font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;
  white-space:nowrap;
}
.table td{
  padding:11px 14px;border-bottom:1px solid var(--color-line-soft);
  vertical-align:middle;
}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--color-surface)}
.table .num{font-variant-numeric:tabular-nums;color:var(--color-ink-2)}
.table .actions-cell{white-space:nowrap;display:flex;gap:4px;justify-content:flex-end}

/* Mini icon-only button used in tables */
.icon-btn{
  width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--color-line);background:var(--color-bg);border-radius:var(--radius-sm);
  color:var(--color-ink-2);font-size:14px;cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth),border-color var(--dur-fast) var(--ease-smooth);
}
.icon-btn:hover{background:var(--color-surface)}
.icon-btn--ok{color:var(--color-ok);border-color:var(--color-ok-line)}
.icon-btn--ok:hover{background:var(--color-ok-bg)}
.icon-btn--danger{color:var(--color-danger);border-color:var(--color-danger-line)}
.icon-btn--danger:hover{background:var(--color-danger-bg)}

/* ============================================================
   Badges / chips — one primitive, role-coloured
   ============================================================ */
.badge,.chip{
  display:inline-flex;align-items:center;gap:4px;
  height:22px;padding:0 8px;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:1;
  letter-spacing:.02em;
  background:var(--color-surface);color:var(--color-ink-2);
  border:1px solid var(--color-line);white-space:nowrap;
}
.badge--ok{background:var(--color-ok-bg);color:var(--color-ok);border-color:var(--color-ok-line)}
.badge--warn{background:var(--color-warn-bg);color:var(--color-warn);border-color:var(--color-warn-line)}
.badge--danger{background:var(--color-danger-bg);color:var(--color-danger);border-color:var(--color-danger-line)}
.badge--info{background:var(--color-info-bg);color:var(--color-info);border-color:var(--color-info-line)}
.badge--accent{background:var(--color-accent-soft);color:var(--color-accent-deep);border-color:#bedbcc}
.badge--muted{background:var(--color-recessed);color:var(--color-ink-3);border-color:var(--color-line)}
.badge--solid{background:var(--color-accent-deep);color:#fff;border-color:var(--color-accent-deep);font-weight:var(--weight-semibold)}
.badge--strike{text-decoration:line-through}

/* Dietary / allergen chip — see §5 (Phase 33) */
.diet-chip{
  display:inline-flex;align-items:center;gap:4px;
  height:24px;padding:0 8px 0 6px;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:var(--weight-medium);
  background:var(--color-accent-soft);color:var(--color-accent-deep);
  border:1px solid #bedbcc;
}
.diet-chip svg{width:14px;height:14px}
.allergen-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ============================================================
   Toasts / flash messages
   ============================================================ */
.flash{
  display:flex;align-items:flex-start;gap:10px;
  padding:12px 14px;border-radius:var(--radius-md);
  background:var(--color-bg);border:1px solid var(--color-line);
  font-size:var(--text-sm);color:var(--color-ink-2);
  box-shadow:var(--shadow-1);margin-bottom:var(--space-2);
}
.flash--ok{background:var(--color-ok-bg);border-color:var(--color-ok-line);color:#14532d}
.flash--warn{background:var(--color-warn-bg);border-color:var(--color-warn-line);color:#7c2d12}
.flash--danger{background:var(--color-danger-bg);border-color:var(--color-danger-line);color:#7f1d1d}
.flash--info{background:var(--color-info-bg);border-color:var(--color-info-line);color:#1e3a8a}
.flash__icon{flex-shrink:0;width:18px;height:18px;margin-top:1px}

/* Toast container (fixed) */
.toasts{
  position:fixed;top:24px;right:24px;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:8px;max-width:360px;
}

/* ============================================================
   Modal / dialog (uses <dialog>)
   ============================================================ */
dialog.modal,.modal{
  border:0;padding:0;max-width:520px;width:calc(100% - 32px);
  background:var(--color-bg);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-3),0 40px 100px rgba(15,30,22,.18);
}
dialog.modal::backdrop,.modal-backdrop{background:rgba(15,30,22,.4)}
.modal__head{padding:var(--space-5) var(--space-5) var(--space-3);border-bottom:1px solid var(--color-line-soft)}
.modal__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-regular);letter-spacing:var(--tracking-heading)}
.modal__body{padding:var(--space-5);color:var(--color-ink-2);font-size:var(--text-base);line-height:var(--leading-base)}
.modal__foot{display:flex;justify-content:flex-end;gap:var(--space-2);padding:var(--space-3) var(--space-5) var(--space-5);border-top:1px solid var(--color-line-soft)}

/* ============================================================
   Empty / loading / error states
   ============================================================ */
.empty{
  text-align:center;padding:var(--space-7) var(--space-5);
  color:var(--color-ink-3);background:var(--color-surface);
  border:1px dashed var(--color-line);border-radius:var(--radius-lg);
}
.empty__icon{width:48px;height:48px;margin:0 auto var(--space-3);opacity:.5;color:var(--color-ink-4)}
.empty__title{font-family:var(--font-display);font-size:var(--text-xl);font-weight:var(--weight-regular);color:var(--color-ink-2);margin-bottom:6px}
.empty__body{font-size:var(--text-base)}
.empty__cta{margin-top:var(--space-4)}

.skeleton{
  background:linear-gradient(90deg,var(--color-recessed) 0%,#ebeae7 50%,var(--color-recessed) 100%);
  background-size:200% 100%;animation:skeleton 1.4s ease-in-out infinite;
  border-radius:var(--radius-md);
}
@keyframes skeleton{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ============================================================
   Breadcrumbs (admin)
   ============================================================ */
.breadcrumb{display:flex;align-items:center;gap:6px;font-size:var(--text-sm);color:var(--color-ink-3);margin-bottom:var(--space-4)}
.breadcrumb a{color:var(--color-ink-3)}
.breadcrumb a:hover{color:var(--color-accent-deep)}
.breadcrumb__sep{color:var(--color-ink-4)}

/* ============================================================
   Pagination
   ============================================================ */
.pagination{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:var(--space-5);font-size:var(--text-sm)}
.pagination a,.pagination span{
  min-width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 10px;border:1px solid var(--color-line);border-radius:var(--radius-md);
  background:var(--color-bg);color:var(--color-ink-2);
}
.pagination a:hover{background:var(--color-surface);text-decoration:none;color:var(--color-ink)}
.pagination .is-current{background:var(--color-accent-deep);color:#fff;border-color:var(--color-accent-deep);font-weight:var(--weight-medium)}
.pagination .is-disabled{opacity:.4;pointer-events:none}

/* ============================================================
   Alert banners (page-level)
   ============================================================ */
.alert{
  display:flex;gap:12px;padding:14px 16px;
  border-radius:var(--radius-lg);border:1px solid var(--color-line);
  background:var(--color-surface);font-size:var(--text-base);
  margin-bottom:var(--space-5);
}
.alert--info{background:var(--color-info-bg);border-color:var(--color-info-line);color:#1e3a8a}
.alert--warn{background:var(--color-warn-bg);border-color:var(--color-warn-line);color:#7c2d12}
.alert__icon{flex-shrink:0;width:20px;height:20px;margin-top:1px}

/* ============================================================
   Tabs (page-level, e.g. settings)
   ============================================================ */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--color-line);margin-bottom:var(--space-5);overflow-x:auto}
.tab{
  padding:10px 16px;border:0;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:var(--text-base);color:var(--color-ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-smooth),border-color var(--dur-fast) var(--ease-smooth);
}
.tab:hover{color:var(--color-ink)}
.tab[aria-selected="true"],.tab.is-active{color:var(--color-accent-deep);border-bottom-color:var(--color-accent);font-weight:var(--weight-medium)}

/* ============================================================
   Page header (admin)
   ============================================================ */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap}
.page-head__title{font-family:var(--font-body);font-size:var(--text-2xl);font-weight:var(--weight-medium);letter-spacing:var(--tracking-heading);line-height:1.2}
.page-head__sub{font-size:var(--text-base);color:var(--color-ink-3);margin-top:4px}
.page-head__actions{display:flex;gap:var(--space-2);align-items:center}

/* ============================================================
   Filter chips (list pages)
   ============================================================ */
.filter-bar{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap;margin-bottom:var(--space-4)}
.filter-bar .filter-search{flex:1;min-width:220px}
.filter-chip{
  display:inline-flex;align-items:center;gap:6px;
  height:32px;padding:0 12px;border-radius:var(--radius-pill);
  border:1px solid var(--color-line);background:var(--color-bg);color:var(--color-ink-2);
  font-size:var(--text-sm);cursor:pointer;
  transition:background var(--dur-fast) var(--ease-smooth),border-color var(--dur-fast) var(--ease-smooth);
}
.filter-chip:hover{background:var(--color-surface);text-decoration:none}
.filter-chip[aria-pressed="true"],.filter-chip.is-active{
  background:var(--color-accent-soft);color:var(--color-accent-deep);border-color:#bedbcc;font-weight:var(--weight-medium);
}