/* ============================================================
   Back Home Bakery — shared theme
   Tokens are lifted from the current backhomebakeryco.com so the
   rebuild feels like the same bakery. Both the customer site and
   Amanda's console use this file. Don't hardcode colors elsewhere.
   ============================================================ */

:root {
  /* Farmhouse neutrals */
  --cream: #F8F4EE;
  --cream-dark: #EFE8DE;
  --shiplap: #F5F1E9;
  --shiplap-line: rgba(90, 70, 55, 0.07);
  --white: #FFFDF8;
  --line: rgba(92, 70, 54, 0.13);
  --line-strong: rgba(92, 70, 54, 0.22);

  /* Brand */
  --terracotta: #C45C3E;
  --terracotta-deep: #B4512F;   /* buttons: keeps white text readable */
  --terracotta-dark: #A3482F;
  --terracotta-wash: rgba(196, 92, 62, 0.10);
  --sage: #7A8B6E;
  --sage-dark: #5C6B52;
  --sage-light: #A3B194;
  --sage-wash: rgba(122, 139, 110, 0.13);
  --wood: #5C4636;
  --wood-light: #7A624E;
  --butter: #E8D5A3;
  --butter-light: #F5E8C0;
  --butter-wash: rgba(232, 213, 163, 0.38);

  /* Chalkboard (the "This Week" board) */
  --chalk: #F5F0E6;
  --chalk-board: #2A382C;
  --chalk-frame: #3D4F40;

  /* Ink */
  --charcoal: #2F2A26;
  --muted: #6B5E52;
  --faint: #9A8E82;

  /* Order states */
  --st-new: #A3482F;        --st-new-bg: rgba(196, 92, 62, 0.12);
  --st-confirmed: #4E5D45;  --st-confirmed-bg: rgba(122, 139, 110, 0.16);
  --st-baking: #8A5A12;     --st-baking-bg: rgba(232, 190, 110, 0.28);
  --st-ready: #2F6B3F;      --st-ready-bg: rgba(63, 125, 78, 0.14);
  --st-done: #6B5E52;       --st-done-bg: rgba(92, 70, 54, 0.08);

  /* Type */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-script: 'Yellowtail', 'Brush Script MT', cursive;
  --font-chalk: 'Amatic SC', 'Segoe Print', cursive;   /* chalkboard lettering */
  --font-hand: 'Caveat', 'Segoe Print', cursive;       /* chalkboard handwriting */

  /* Shape */
  --radius-sm: 8px;
  --radius: 10px;
  --radius-lg: 16px;
  --shadow: 0 8px 28px rgba(92, 70, 54, 0.10);
  --shadow-soft: 0 4px 16px rgba(92, 70, 54, 0.07);
  --shadow-lift: 0 18px 50px rgba(47, 42, 38, 0.18);

  /* Glass: frosted bars that float over the page (header, the menu's add bar) */
  --glass: rgba(245, 241, 233, 0.9);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);       /* arrives fast, settles softly */
  --ease-in: cubic-bezier(0.4, 0, 1, 1);            /* leaves */
  --ease-move: cubic-bezier(0.4, 0, 0.2, 1);        /* slides */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* a little overshoot */
  /* A real spring (about 3% past, then settles): screens sliding like an app */
  --spring: linear(0, 0.0235, 0.0835, 0.1667, 0.2627, 0.3635, 0.4631, 0.5576, 0.6442, 0.7214, 0.7884, 0.8453, 0.8925, 0.9307, 0.9609, 0.984, 1.0011, 1.0131, 1.0211, 1.0258, 1.028, 1.0283, 1.0273, 1.0253, 1.0228, 1.02, 1.0172, 1.0144, 1.0117, 1.0094, 1.0073, 1.0055, 1.0039, 1.0027, 1.0017, 1.0009, 1);
  --shadow-edge: -14px 0 36px rgba(47, 42, 38, 0.2);  /* the leading edge of a screen sliding over another */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--shiplap);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--terracotta-dark); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
:focus-visible { outline: 3px solid rgba(196, 92, 62, 0.45); outline-offset: 2px; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Textures ---------- */
.shiplap {
  background-color: var(--shiplap);
  background-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 1.5px), var(--shiplap-line) calc(100% - 1.5px));
  background-size: 100% 44px;
}
.shiplap-dark {
  background-color: #EDE6DB;
  background-image: linear-gradient(to bottom, transparent 0, transparent calc(100% - 1.5px), rgba(70, 55, 40, 0.09) calc(100% - 1.5px));
  background-size: 100% 44px;
}

/* ---------- Type helpers ---------- */
.script { font-family: var(--font-script); font-weight: 400; color: var(--terracotta); }
.display { font-family: var(--font-display); font-weight: 600; color: var(--wood); }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sage-dark);
}
.muted { color: var(--muted); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.7rem 1.4rem;
  border-radius: 10px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--terracotta-deep); color: #fff; }
.btn-primary:hover { background: var(--terracotta-dark); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(196, 92, 62, 0.28); }
.btn-outline { background: transparent; border-color: var(--wood); color: var(--wood); }
.btn-outline:hover { background: var(--wood); color: #fff; }
.btn-sage { background: var(--sage-dark); color: #fff; }
.btn-sage:hover { background: #4E5D45; transform: translateY(-1px); }
.btn-ghost { background: transparent; color: var(--wood); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--cream-dark); }
.btn-butter { background: var(--butter); color: var(--chalk-board); }
.btn-butter:hover { background: var(--butter-light); transform: translateY(-1px); }
.btn-sm { min-height: 36px; padding: 0.45rem 0.95rem; font-size: 0.85rem; border-radius: 8px; }
.btn-lg { min-height: 52px; padding: 0.9rem 1.8rem; font-size: 1.02rem; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--white);
  color: var(--wood);
  cursor: pointer;
}
.icon-btn:hover { background: var(--cream-dark); }
.icon-btn svg { width: 16px; height: 16px; }

/* ---------- Cards ---------- */
.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
}

/* ---------- Status (a colored dot + text, no bubble) ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-weight: 700;
  white-space: nowrap;
}
.pill::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.pill.no-dot::before { display: none; }
.st-new       { color: var(--st-new); }
.st-confirmed { color: var(--st-confirmed); }
.st-baking    { color: var(--st-baking); }
.st-ready     { color: var(--st-ready); }
.st-done      { color: var(--st-done); }

/* ---------- Forms ---------- */
.field { display: grid; gap: 0.35rem; }
.field > span, .field-label { font-size: 0.85rem; font-weight: 700; color: var(--wood); }
.field small { color: var(--muted); font-size: 0.8rem; }
.input, .select, .textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.6rem 0.85rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.textarea { min-height: 96px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--sage); box-shadow: 0 0 0 3px var(--sage-wash); }

/* Quantity stepper: only as wide as it needs to be, even inside a form's grid */
.stepper { display: inline-flex; align-items: center; justify-self: start; align-self: start; width: max-content; border: 1.5px solid var(--line-strong); border-radius: 10px; background: #fff; }
.stepper button { width: 44px; height: 44px; border: 0; background: none; cursor: pointer; color: var(--wood); display: grid; place-items: center; border-radius: 8px; }
.stepper button:hover { background: var(--cream-dark); }
.stepper button svg { width: 14px; height: 14px; }
.stepper output { min-width: 2.25rem; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Toggle switch */
.switch { position: relative; display: inline-flex; align-items: center; gap: 0.6rem; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .track { width: 44px; height: 26px; border-radius: 999px; background: #D8CFC4; position: relative; transition: background 0.2s ease; flex: none; }
.switch .track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.2); transition: transform 0.2s ease; }
.switch input:checked + .track { background: var(--sage-dark); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid rgba(122, 139, 110, 0.5); outline-offset: 2px; }

/* ---------- Toasts ---------- */
.toasts { position: fixed; z-index: 500; right: 16px; bottom: calc(16px + var(--toast-lift, 0px)); display: grid; gap: 0.6rem; max-width: min(380px, calc(100vw - 32px)); }
.toast {
  display: flex; gap: 0.75rem; align-items: flex-start;
  padding: 0.85rem 1rem;
  background: var(--chalk-board);
  color: var(--chalk);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  font-size: 0.92rem;
  animation: toast-in 0.25s ease;
}
.toast strong { color: var(--butter); display: block; }
.toast svg { width: 20px; height: 20px; flex: none; color: var(--butter); margin-top: 2px; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- Pop-up (a small centered note or choice; BHB.modal in store.js) ---------- */
:root { --scrim: rgba(47, 42, 38, 0.45); }
.modal-scrim {
  position: fixed; inset: 0; z-index: 450;
  display: grid; place-items: center; padding: 16px;
  background: var(--scrim);
  animation: modal-fade 0.2s ease;
}
.modal {
  position: relative; width: 100%; max-width: 420px;
  max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  padding: 1.5rem 1.25rem 1.25rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lift);
  animation: modal-in 0.22s ease;
}
.modal:focus { outline: none; }
.modal-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; }
.modal-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 0.8rem; border-radius: 50%; background: var(--butter-wash); color: var(--wood); }
.modal-icon svg { width: 26px; height: 26px; }
.modal-title { font-family: var(--font-display); font-weight: 600; font-size: 1.65rem; line-height: 1.15; color: var(--wood); margin: 0 0 0.5rem; padding-right: 2.75rem; }
.modal-body { display: grid; gap: 0.7rem; font-size: 0.97rem; color: var(--charcoal); }
.modal-body .muted { font-size: 0.9rem; }
.modal-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.modal-actions .btn { flex: 1 1 auto; }
@keyframes modal-in { from { transform: translateY(8px) scale(0.98); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

/* Birthday: two drop-downs, month and day (no year, never a date box). */
.bday { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.5rem; max-width: 340px; }
.bday .select { min-height: 44px; }

/* ---------- "Photo coming soon" (BHB.noPhoto in store.js) ----------
   A treat without a photo of its own shows a drawing of its kind. It fills
   the box it's put in; each page sizes the drawing for its own boxes. */
.no-photo { display: grid; place-items: center; align-content: center; gap: 0.35rem; width: 100%; height: 100%; color: var(--wood-light); text-align: center; }
.treat-art { display: block; width: 72%; height: 72%; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.treat-art .ta-dough { fill: var(--butter-light); }
.treat-art .ta-crust { fill: var(--butter); }
.treat-art .ta-cream { fill: var(--white); }
.treat-art .ta-wrap { fill: var(--sage-light); fill-opacity: 0.45; }
.treat-art .ta-choc { fill: var(--wood-light); fill-opacity: 0.6; }
.treat-art .ta-fudge { fill: var(--wood); fill-opacity: 0.8; }
.treat-art .ta-pop { fill: var(--terracotta); }
.treat-art .ta-glass { fill: var(--white); fill-opacity: 0.22; }
.treat-art .ta-shine { stroke-opacity: 0.45; }
.treat-art .ta-pop-line { stroke: var(--terracotta); stroke-width: 2.6; }
.treat-art .ta-leaf-line { stroke: var(--sage); stroke-width: 2.6; }
.treat-art .ta-cream-line { stroke: var(--white); stroke-width: 2.4; }
/* Handwritten, but never chalk-roughened: it has to read easily. */
.no-photo-words { font-family: var(--font-hand); font-weight: 500; font-size: 1.5rem; line-height: 1.05; color: var(--wood-light); }

/* Little color dots beside a custom request's colors (BHB.colorDots) */
.color-dots { display: inline-flex; gap: 3px; margin-right: 0.45rem; vertical-align: -2px; }
.color-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.14); }