/* ============================================================
   Shared tokens and components — light surface.
   Paper background, dark ink, and colour reserved for meaning:
   room state on the kiosk, bookings in the management grid.
   ============================================================ */

:root{
  --paper:      #F6F5F2;
  --card:       #FFFFFF;
  --ink:        #171A1F;
  --ink-soft:   #5C626B;
  --ink-faint:  #8D939C;
  --hairline:   rgba(23,26,31,.12);
  --hairline-2: rgba(23,26,31,.06);

  --accent:     #1F5C8B;
  --accent-ink: #FFFFFF;
  --danger:     #B33A2B;

  --shadow-sm:  0 1px 2px rgba(23,26,31,.06);
  --shadow-md:  0 10px 30px rgba(23,26,31,.14), 0 2px 8px rgba(23,26,31,.06);

  --pad:        clamp(14px, 2.6vw, 30px);
  --radius:     14px;

  --font-display: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- buttons ---------- */
.btn{
  border:0;border-radius:var(--radius);
  padding:15px 18px;
  font-family:var(--font-display);
  font-variation-settings:"wdth" 112;
  font-weight:700;font-size:16px;line-height:1;
  cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  transition:filter .15s, background-color .15s, color .15s, border-color .15s;
}
.btn-sm{padding:11px 15px;font-size:14px;border-radius:10px}
.btn-solid{background:var(--accent);color:var(--accent-ink);box-shadow:var(--shadow-sm)}
.btn-solid:hover{filter:brightness(1.12)}
.btn-ghost{background:var(--card);border:1.5px solid var(--hairline);color:var(--ink-soft)}
.btn-ghost:hover{border-color:var(--ink-faint);color:var(--ink)}
.btn-danger{background:transparent;border:1.5px solid var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn:disabled{opacity:.45;cursor:progress}
/* [hidden] must win over the display above, or hidden buttons keep showing. */
.btn[hidden]{display:none}

/* ---------- form fields ---------- */
.field{margin-top:14px;min-width:0}
.field label{
  display:block;font-size:11px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px;
}
.field input{
  width:100%;padding:12px 14px;
  background:var(--card);
  border:1.5px solid var(--hairline);border-radius:12px;
  color:var(--ink);font-family:var(--font-display);font-size:16px;
}
.field input[type="time"],
.field input[type="date"]{font-family:var(--font-mono);font-size:15px}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(31,92,139,.14)}
.field input::placeholder{color:var(--ink-faint)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
@media (max-width:520px){.grid-2{grid-template-columns:1fr}}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:22px;transform:translate(-50%,16px);
  background:var(--ink);color:#fff;
  padding:12px 20px;border-radius:999px;box-shadow:var(--shadow-md);
  font-weight:600;font-size:14px;max-width:90vw;text-align:center;
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.toast.is-error{background:var(--danger);color:#fff}

/* ---------- modal / sheet shells ---------- */
.modal-scrim,.sheet-scrim{
  position:fixed;inset:0;background:rgba(23,26,31,.42);
  display:flex;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:50;
}
.modal-scrim{align-items:center;padding:var(--pad)}
.sheet-scrim{align-items:flex-end}
.modal-scrim.is-open,.sheet-scrim.is-open{opacity:1;pointer-events:auto}

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

/* A language switch fetches the page again; a moment of dimming says the tap
   registered, without a spinner that would outstay the request. */
body.is-switching .layout,
body.is-switching .pagehead-main{opacity:.55;transition:opacity .12s ease}
body.is-switching .langswitch{pointer-events:none}