/* Beeto design tokens. Source: Beeto Brand Bible (Final), section 4.2. Fonts chosen 2026-10-29: Nunito + Inter. */
:root {
  --navy: #0B1125;
  --teal: #00C3A0;
  --cream: #FAF6EB;
  --white: #FFFFFF;
  --blue: #0075B8;
  --mint: #00E8B0;

  /* Tints and neutrals derived from navy, for text and lines only */
  --ink: #0B1125;
  --ink-2: #3D4357;
  --ink-3: #6B7183;
  --line: #E4E6EC;
  --line-strong: #CDD1DA;
  --teal-soft: #E3F7F2;
  --teal-press: #00AD8E;

  --font-head: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(11, 17, 37, .06), 0 8px 24px rgba(11, 17, 37, .06);
  --shadow-2: 0 2px 4px rgba(11, 17, 37, .06), 0 24px 48px rgba(11, 17, 37, .10);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--white); line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* Buttons: navy text on teal keeps contrast high (white on teal is too faint to read comfortably) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px;
  border-radius: var(--r-pill); border: 0; font: 700 16px/1 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, transform .15s ease; }
.btn-primary { background: var(--teal); color: var(--navy); }
.btn-primary:hover { background: var(--teal-press); }
.btn-primary:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--navy); }
.btn:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }