/* ============================================================
   THE BOAT — Design System (Phase 1 foundation)
   Editorial / marine-data visual language.
   Single source of truth for tokens + shared components.
   Rules: no emoji in UI, no gradients, no glassmorphism,
   no default box-shadows on cards (1px hairline borders instead).
   ============================================================ */

:root {
  /* ── Surfaces & paper ── */
  --paper: #FAFAF7;        /* page background — warm off-white */
  --surface: #FFFFFF;      /* cards */

  /* ── Ink (text) ── */
  --ink: #1A2833;          /* primary text */
  --ink-2: #55636E;        /* secondary text */
  --ink-3: #8A96A0;        /* captions / tertiary */

  /* ── Lines ── */
  --line: #E4E3DD;         /* hairline borders */
  --line-strong: #CFCEC6;

  /* ── Brand (deep marine teal) ── */
  --brand: #0E5568;        /* links, primary buttons, active nav, accents */
  --brand-strong: #0A4252; /* hover / pressed */
  --brand-tint: #EEF4F5;   /* tinted backgrounds, selected states */

  /* ── Signal colors (fishing-condition verdicts ◎○△×) ── */
  --good: #23713D;
  --good-tint: #EDF5EF;
  --fair: #8A6D1F;
  --fair-tint: #F7F2E4;
  --poor: #A8442C;
  --poor-tint: #F8EEE9;

  /* ── Radii ── */
  --radius: 10px;          /* cards */
  --radius-sm: 6px;        /* buttons, small controls */
}

/* ============================================================
   Optional elevation — ONLY for dropdowns / popovers.
   Cards must NOT use this; they use a 1px --line border.
   ============================================================ */
.elev {
  box-shadow: 0 1px 2px rgba(26, 40, 51, .05);
}

/* ============================================================
   Card — flat surface with a hairline border. No shadow.
   ============================================================ */
.tb-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

/* ============================================================
   Buttons — solid, no gradient.
   ============================================================ */
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.tb-btn-primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.tb-btn-primary:hover {
  background: var(--brand-strong);
  border-color: var(--brand-strong);
}

.tb-btn-secondary {
  background: var(--surface);
  color: var(--brand);
  border-color: var(--line-strong);
}
.tb-btn-secondary:hover {
  border-color: var(--brand);
  background: var(--brand-tint);
}

/* ============================================================
   Badge — small rectangle, tinted background + strong text.
   ============================================================ */
.tb-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  white-space: nowrap;
}
.tb-badge.brand { background: var(--brand-tint); color: var(--brand); }
.tb-badge.good  { background: var(--good-tint); color: var(--good); }
.tb-badge.fair  { background: var(--fair-tint); color: var(--fair); }
.tb-badge.poor  { background: var(--poor-tint); color: var(--poor); }

/* ============================================================
   Section title — editorial left-tick device.
   ============================================================ */
.tb-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0;
}
.tb-section-title::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 15px;
  border-radius: 2px;
  background: var(--brand);
  flex-shrink: 0;
}

/* ============================================================
   Thumbnail — flat article/species image block.
   --brand-tint background, centered content.
   ============================================================ */
.tb-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-tint);
  color: var(--brand);
  border-radius: var(--radius);
  overflow: hidden;
}
.tb-thumb.tb-thumb-top {
  border-radius: var(--radius) var(--radius) 0 0;
}
.tb-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}