:root {
  --color-bg: #ffffff;
  --color-surface: #ffffff;
  --color-tint: #f3f5f8;
  --color-text: #081f35;
  --color-muted: #5a6878;
  --color-primary: #081f35;
  --color-primary-contrast: #ffffff;
  --color-accent: #c8a35a;
  --color-sun: #dfa83f;
  --color-border: rgba(8, 31, 53, 0.12);
  --color-success: #15803d;
  --color-danger: #b42318;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-heading: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font-accent: 'Cormorant Garamond', Georgia, serif;
  --radius: 12px;
  --shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.2);
  /* RGB channels for Tailwind opacity modifiers (bg-ink/90 etc.) */
  --ink-rgb: 8 31 53;
  --gold-rgb: 200 163 90;
  --sun-rgb: 223 168 63;
  --sage-rgb: 95 122 100;
  --tint-rgb: 243 245 248;
  --paper-rgb: 255 255 255;
}

[hidden] { display: none !important; }
html { scroll-behavior: smooth; color-scheme: only light; }
body { font-family: var(--font-body); color: var(--color-text); background: var(--color-bg); }
:focus-visible { outline: 2px solid var(--color-sun); outline-offset: 2px; }

.light-canvas-surface { background-color: var(--color-bg); }
.light-header-surface { background-color: var(--color-surface); }
.light-tint-surface { background-color: var(--color-tint); }
.ink-surface { background-color: var(--color-primary); }
.hero-kicker { font-family: var(--font-accent); font-style: italic; font-weight: 500; }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.animate-rise { opacity: 0; animation: rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.animate-rise-1 { animation-delay: 0.1s; }
.animate-rise-2 { animation-delay: 0.25s; }
.animate-rise-3 { animation-delay: 0.4s; }
.booking-arrive { animation: rise 1s 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-left { transform: translateX(-18px); }
.reveal-right { transform: translateX(18px); }
.reveal-pop { transform: scale(0.98); }
.reveal.is-visible { opacity: 1; transform: none; }

.cta-glow { transition: box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; }
.cta-glow:hover { box-shadow: 0 8px 28px -10px rgb(var(--sun-rgb) / 0.55); }

@keyframes ring-pulse { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.25); } }
.chat-launcher-ring { animation: ring-pulse 2.4s ease-out infinite; }

.mode-btn { color: rgb(var(--ink-rgb) / 0.5); }
.mode-btn:hover { color: var(--color-text); }
.mode-btn[aria-pressed="true"] { background: #fff; color: var(--color-text); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }

.input {
  width: 100%; min-height: 48px; border-radius: 0.75rem; border: 1px solid rgb(var(--ink-rgb) / 0.15);
  background: var(--color-surface); padding: 0.8rem 1rem; font-size: 0.875rem; font-weight: 500;
  color: var(--color-text); outline: none; transition: border-color 0.15s, box-shadow 0.15s;
}
.input.has-icon { padding-left: 2.75rem; }
.input::placeholder { color: rgb(var(--ink-rgb) / 0.4); }
.input:hover { border-color: rgb(var(--ink-rgb) / 0.3); }
.input:focus { border-color: rgb(var(--sun-rgb) / 0.6); box-shadow: 0 0 0 2px rgb(var(--sun-rgb) / 0.45); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
select.input { appearance: none; cursor: pointer; }
textarea.input { resize: vertical; }
input[type="date"].input, input[type="time"].input { cursor: pointer; }
.field-label { display: block; margin-bottom: 0.375rem; font-size: 0.875rem; font-weight: 600; color: rgb(var(--ink-rgb) / 0.7); }
.form-error { color: var(--color-danger); font-size: 0.875rem; }
.form-error:empty { display: none; }

dialog.sheet { border: 0; padding: 0; border-radius: 1.5rem; width: min(92vw, 30rem); max-height: 90vh; color: var(--color-text); box-shadow: var(--shadow); }
dialog.sheet::backdrop { background: rgb(var(--ink-rgb) / 0.55); backdrop-filter: blur(2px); }

.review-dot { height: 10px; width: 10px; border-radius: 9999px; background: rgb(var(--ink-rgb) / 0.2); transition: width 0.2s, background-color 0.2s; }
.review-dot:hover { background: rgb(var(--ink-rgb) / 0.4); }
.review-dot.is-active { width: 28px; background: var(--color-primary); }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 60;
  background: var(--color-primary); color: var(--color-primary-contrast); padding: 0.75rem 1.25rem;
  border-radius: var(--radius); font-size: 0.9rem; font-weight: 600; box-shadow: var(--shadow);
  border-left: 4px solid var(--color-sun);
}
.toast[data-kind="bad"] { border-left-color: var(--color-danger); }

.wordmark { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.04em; color: rgb(var(--ink-rgb) / 0.45); transition: color 0.5s; }
.wordmark:hover { color: rgb(var(--ink-rgb) / 0.8); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .animate-rise, .reveal { opacity: 1 !important; transform: none !important; }
}