/* App-level theme layer — loaded AFTER tokens.css, so it wins on cascade.

   The prototype (Craftfiti Booking.html) ships a fixed tweak state:
     mode = atelier (LIGHT)  ·  display_face = DM Serif Display  ·  marker = yellow
   tokens.css keeps Fraunces + a dark :root and the prototype overrides both at
   runtime. We bake the prototype's rendered look in here so production matches
   1:1, plus a persistent dark/light toggle (default light). */

:root { --display: 'DM Serif Display', Georgia, serif; }

/* Floating dark/light toggle (theme.js builds the button) */
.theme-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 9999;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--paper-2);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-modal);
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .15s ease, color .2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); }
.theme-toggle:active { transform: translateY(0); }
/* Staff: the toggle lives INSIDE the top bar (next to the time chip), not
   floating — so it never covers the tab bar / FAB / pick-a-table overlay. */
.sf-themebtn {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--ink);
  border: 1px solid var(--rule); cursor: pointer;
  font-size: 15px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: transform .15s ease, background .2s ease;
}
.sf-themebtn:hover { background: var(--paper-2); }
.sf-themebtn:active { transform: scale(.94); }