/* ============================================================
   Dockhand — shared brand system
   Pine green on cottage paper · Newsreader + Hanken Grotesk
   Ported from the design handoff package. See README in design/.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400;1,6..72,500&family=Hanken+Grotesk:wght@400;500;600;700;800&display=swap');

:root {
  /* surfaces */
  --paper:      #F4EFE4;
  --paper-2:    #FBF8F1;
  --card:       #FFFFFF;

  /* ink */
  --ink:        #18241D;
  --ink-soft:   #4C584F;
  --ink-faint:  #8A9189;

  /* pine */
  --pine:       #1F5641;
  --pine-deep:  #12382A;
  --pine-soft:  #2E6B53;
  --pine-wash:  #E7EFE8;
  --pine-line:  #CDD9CF;

  /* warm accents */
  --gold:       #B5862F;
  --gold-soft:  #F0E2C4;
  --accent:     #E9C97C;
  --accent-ink: #15392B;
  --sand:       #E8DFCB;
  --line:       #E2DAC9;

  /* radii */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* shadows */
  --shadow-sm: 0 1px 2px rgba(24,36,29,.06), 0 4px 12px -6px rgba(24,36,29,.12);
  --shadow:    0 2px 4px rgba(24,36,29,.05), 0 18px 40px -20px rgba(18,56,42,.30);
  --shadow-lg: 0 8px 24px -8px rgba(18,56,42,.28), 0 40px 80px -40px rgba(18,56,42,.40);

  --font-serif: 'Newsreader', Georgia, serif;
  --font-sans:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.serif   { font-family: var(--font-serif); font-weight: 500; letter-spacing: -.01em; }
.serif-i { font-family: var(--font-serif); font-style: italic; font-weight: 500; }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pine-soft);
}
.muted { color: var(--ink-soft); }

.btn {
  font-family: var(--font-sans);
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 16px; font-weight: 700; line-height: 1;
  padding: 15px 22px; border-radius: var(--r-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .15s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--pine); color: #F4EFE4; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--pine-deep); box-shadow: var(--shadow); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--pine-line); }
.btn-ghost:hover { border-color: var(--pine); background: rgba(31,86,65,.05); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: #9c7126; }

.chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--pine-deep);
  background: var(--pine-wash); border: 1px solid var(--pine-line);
  padding: 7px 13px; border-radius: var(--r-pill);
}
.chip-gold { color: #6e5113; background: var(--gold-soft); border-color: #E2CE97; }

.stars { color: var(--gold); letter-spacing: 1px; }
::selection { background: var(--pine); color: #F4EFE4; }