/* ui_kits/web/kit.css — shared styles for the web kit */
@import url('../../colors_and_type.css');

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
}

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
.section { padding: 96px 0; }
.section.tight { padding: 64px 0; }

.eyebrow-x {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--fg-subtle);
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 2px;
  border: 0;
  cursor: pointer;
  letter-spacing: -0.005em;
  transition: all 120ms var(--ease-standard);
  text-decoration: none;
}
.btn-accent { background: var(--gold-500); color: var(--ink-1000); }
.btn-accent:hover { background: var(--gold-600); color: var(--sand-50); }
.btn-primary { background: var(--ink-1000); color: var(--sand-50); }
.btn-primary:hover { background: var(--ink-700); }
.btn-ghost { background: transparent; color: var(--fg); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--sand-100); }
.btn-ghost.on-ink { color: var(--sand-50); border-color: var(--border-inverse); }
.btn-ghost.on-ink:hover { background: var(--ink-800); }
.btn-lg { padding: 16px 24px; font-size: 15px; }

/* Inputs (compact, used in booking widget) */
.input {
  font-family: var(--font-body);
  font-size: 15px;
  padding: 0;
  border: 0;
  background: transparent;
  outline: none;
  color: inherit;
  width: 100%;
}
.input::placeholder { color: var(--fg-subtle); }

.eyebrow-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 4px;
  display: block;
}

/* Wordmark inline */
.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.04em;
  line-height: 1;
  font-variation-settings: 'opsz' 24;
}
.wordmark .pivot { color: var(--gold-500); }