/* Tab Otter — shared design tokens and base styles.
   Both the landing page and /privacy link this, so the palette and type live in
   exactly one place. */

:root {
  --bg:      #E8F4F8;   /* watercolor blue */
  --ink:     #1A4F62;   /* deep ocean, headlines */
  --body:    #3A7A90;   /* body text */
  --teal:    #2E8FAD;   /* primary button */
  --yellow:  #EEC842;   /* clams button border */
  --cream:   #FEF3D0;   /* clams button fill */
  --eyebrow: #5FA8C0;
  --gold:    #C8880A;   /* "Tame Your Tabs" */
  --card:    #FFFFFF;
  --serif:   "DM Serif Display", Georgia, "Times New Roman", serif;
  --sans:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(1120px, 100% - 48px); margin-inline: auto; }

h1, h2, h3 { font-family: var(--serif); color: var(--ink); font-weight: 400; margin: 0; }

a { color: inherit; }

.eyebrow {
  font-size: 15px; font-weight: 500; letter-spacing: .04em;
  color: var(--eyebrow); margin: 0 0 18px;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--sans); font-size: 17px; font-weight: 700;
  padding: 16px 28px; border-radius: 999px; text-decoration: none;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.btn-primary {
  background: var(--teal); color: #fff; border-color: var(--teal);
  box-shadow: 0 6px 18px rgba(46,143,173,.28);
}
.btn-primary:hover { background: #2A829D; box-shadow: 0 10px 24px rgba(46,143,173,.34); }
.btn-clams { background: var(--cream); color: var(--gold); border-color: var(--yellow); }
.btn-clams:hover { background: #FDEBB8; }

/* ---------- footer ---------- */
footer {
  border-top: 1px solid rgba(58,122,144,.18);
  padding: 30px 0 44px; font-size: 14px; text-align: center;
}
footer a { color: var(--teal); }

@media (max-width: 560px) {
  .wrap { width: calc(100% - 32px); }
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}