/*
 * theme.css — Staybook's design-system values.
 * Warm-craft × old-money: cream and ivory grounds, midnight-forest ink, a
 * terracotta accent, sage for calm success states. A serif (Fraunces) carries
 * headlines and room names; Karla carries everything read at length.
 */

:root {
  color-scheme: light;
  --canvas: #f8f4ec;
  --surface: #fcfaf6;
  --surface-2: #efe4cd;
  --border: #e3d8c2;
  --border-strong: #cdb996;
  --ink: #17251f;
  --muted: #5d6a5f;
  --accent: #c87552;
  --accent-hover: #b3623f;
  --accent-ink: #17251f;
  --accent-text: #8f543a;
  --accent-strong: #8f543a;
  --accent-soft: #f3e0d1;
  --accent-border: #e0b696;
  --success: #4f7a5b;
  --success-ink: #fcfaf6;
  --success-soft: #e3ecdf;
  --success-strong: #3c5f46;
  --warning: #a8722d;
  --warning-ink: #fcfaf6;
  --warning-soft: #f3e6cf;
  --warning-strong: #855820;
  --danger: #a8452f;
  --danger-ink: #fcfaf6;
  --danger-soft: #f3ded7;
  --danger-strong: #8a3423;
  --chart-1: #c87552;
  --chart-2: #879a82;
  --chart-3: #17251f;
  --chart-4: #b3944f;
  --chart-5: #8f543a;
  --chart-6: #6f8570;

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "Karla", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display-weight: 560;
  --display-tracking: -0.01em;
  --eyebrow-tracking: 0.04em;

  --radius-btn: 12px;
  --radius-card: 20px;
  --radius-input: 12px;
  --border-w: 1px;
  --border-strong-w: 1px;
  --card-pad: 1.5rem;
  --caps: none;
  --caps-tracking: 0;
  --btn-weight: 600;
  --measure: 65ch;
  --shadow-card: 0 14px 28px -18px color-mix(in srgb, var(--ink) 38%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--ink) 10%, transparent);
  --shadow-raised: 0 24px 48px -20px color-mix(in srgb, var(--ink) 42%, transparent);
  --shadow-btn: 0 8px 16px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  /* A fixed dark wash for text set over a photograph — deliberately NOT tied
     to --ink, which flips light in dark mode: a hero photo's scrim has to
     stay dark regardless of the visitor's mode. */
  --gradient-scrim: linear-gradient(180deg, rgba(15, 23, 19, 0.08) 0%, rgba(15, 23, 19, 0.86) 100%);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #12201a;
  --surface: #1a2a22;
  --surface-2: #223327;
  --border: #304337;
  --border-strong: #47594a;
  --ink: #f2ece0;
  --muted: #a3b3a4;
  --accent: #d98a63;
  --accent-hover: #e29c78;
  --accent-ink: #1a2a22;
  --accent-text: #e3a077;
  --accent-strong: #e3a077;
  --accent-soft: #32261e;
  --accent-border: #5a3d2c;
  --success: #86b391;
  --success-ink: #12201a;
  --success-soft: #1e3227;
  --success-strong: #a9d1b2;
  --warning: #d9a05c;
  --warning-ink: #12201a;
  --warning-soft: #3a2c18;
  --warning-strong: #e8b97e;
  --danger: #d9846f;
  --danger-ink: #12201a;
  --danger-soft: #3a221c;
  --danger-strong: #e79686;
  --chart-1: #d98a63;
  --chart-2: #93a68e;
  --chart-3: #d7d1c2;
  --chart-4: #c9ac6f;
  --chart-5: #e3a077;
  --chart-6: #7fa084;

  --shadow-card: 0 16px 32px -18px rgba(0,0,0,0.55), 0 2px 8px -3px rgba(0,0,0,0.4);
  --shadow-raised: 0 28px 56px -20px rgba(0,0,0,0.65);
  --shadow-btn: 0 8px 18px -10px rgba(0,0,0,0.55);
}

/*
 * app.css — THIS APP'S OWN CSS, for what no primitive and no utility covers:
 * the one screen that makes this app itself — a timer's dial, a kanban
 * board's columns, a seating plan, a game grid. Write those here, named for
 * what they are, in tokens only (var(--accent), var(--radius-card),
 * var(--font-display)). It loads last, after design.css and theme.css, and
 * wins. Ships empty.
 *
 * Not for restyling a primitive: those live in tailwind/components.css and
 * are yours to edit there. Not for colours: those live in theme.css.
 */

/* The booking wizard's only motion beyond the overview's count-up: each step
   quietly crossfades in as htmx swaps it into the card. A plain CSS
   animation on insertion — no JS, no re-arming needed — and it collapses
   under the global reduced-motion kill-switch like everything else. */
@keyframes step-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.step-fade {
  animation: step-in 250ms var(--ease, ease-out) both;
}

/* The guest bottom tab bar and the room-detail reserve bar both float above
   the safe area on a phone with a home indicator. */
@supports (padding: max(0px)) {
  .pb-28 { padding-bottom: max(7rem, env(safe-area-inset-bottom) + 5rem); }
}

/* A sheet drawer on this warm palette reads better with a touch more corner
   on its leading edge than the default square modal edge. */
.sheet {
  border-top-left-radius: var(--radius-card, 20px);
  border-bottom-left-radius: var(--radius-card, 20px);
}