@import url('https://fonts.googleapis.com/css2?family=Familjen+Grotesk:wght@500;600;700&family=Instrument+Sans:ital,wght@0,400;0,600;0,700;1,400&display=swap');
/* RentTide design tokens.
   Palette: deep sea ink, tidewater teal, cool foam ground, wet sand as the one warm note.
   Type: Familjen Grotesk for display, Instrument Sans for everything people read and type. */

:root {
  --ink: #0E2A33;
  --ink-2: #3D5961;
  --ink-3: #6E868C;
  --tide: #127C82;
  --tide-deep: #0B5E63;
  --tide-wash: #D6EBE9;
  --foam: #EEF4F3;
  --paper: #FFFFFF;
  --sand: #D9C7A3;
  --sand-wash: #F4EDDF;
  --line: #CFDDDB;
  --on-tide: #FFFFFF;
  --ok: #2F7D5B; --ok-wash: #DCEFE5;
  --warn: #9A6212; --warn-wash: #F6EAD3;
  --bad: #B23A34; --bad-wash: #F7E0DE;
  --display: "Familjen Grotesk", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --r-sm: 6px; --r-md: 10px; --r-lg: 18px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #E3EEEC; --ink-2: #A9BEBC; --ink-3: #7F9897;
    --tide: #4DB8B5; --tide-deep: #7ED0CC; --tide-wash: #123A3D;
    --foam: #0B1C21; --paper: #11262C; --sand: #C9B48C; --sand-wash: #2A2519;
    --line: #23413F; --on-tide: #08201F;
    --ok: #63C397; --ok-wash: #12342A; --warn: #E2AE5C; --warn-wash: #33280F; --bad: #EE8A84; --bad-wash: #3A1A19;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ink: #E3EEEC; --ink-2: #A9BEBC; --ink-3: #7F9897;
  --tide: #4DB8B5; --tide-deep: #7ED0CC; --tide-wash: #123A3D;
  --foam: #0B1C21; --paper: #11262C; --sand: #C9B48C; --sand-wash: #2A2519;
  --line: #23413F; --on-tide: #08201F;
  --ok: #63C397; --ok-wash: #12342A; --warn: #E2AE5C; --warn-wash: #33280F; --bad: #EE8A84; --bad-wash: #3A1A19;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--foam); color: var(--ink); font: 16px/1.55 var(--body); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.12; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--tide); text-underline-offset: 3px; }
img { max-width: 100%; display: block; }
:focus-visible { outline: 2.5px solid var(--tide); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1.2 var(--body); padding: 11px 18px; border-radius: var(--r-md); border: 1.5px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none; }
.btn:hover { border-color: var(--tide); }
.btn.primary { background: var(--tide); border-color: var(--tide); color: var(--on-tide); }
.btn.primary:hover { background: var(--tide-deep); border-color: var(--tide-deep); }
.btn.small { padding: 7px 12px; font-size: 14px; }
.btn.quiet { border-color: transparent; background: transparent; color: var(--tide); padding-left: 6px; padding-right: 6px; }
.btn.danger { color: var(--bad); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

label { display: block; font-weight: 700; font-size: 14px; margin: 16px 0 6px; color: var(--ink-2); }
input, select, textarea { width: 100%; font: 16px/1.4 var(--body); color: var(--ink); background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 10px 12px; }
input:focus, select:focus, textarea:focus { border-color: var(--tide); outline: none; box-shadow: 0 0 0 3px var(--tide-wash); }
textarea { min-height: 96px; resize: vertical; }
.hint { font-size: 13px; color: var(--ink-3); margin-top: 6px; }

.wordmark { display: inline-flex; align-items: center; gap: 10px; font: 700 21px/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -0.02em; }
.wordmark .tide { color: var(--tide); }
.wordmark svg { flex: none; }