/* Spontbox — Brand tokens (Direction: The Signal)
   Drop into global CSS. Fonts: add the two <link> tags from README. */
:root {
  /* Color */
  --sb-forest: #1F3D2E;  /* primary: headers, footer, hero */
  --sb-leaf:   #3E7A54;  /* action: CTAs, links, focus rings */
  --sb-sage:   #9CC0A6;  /* highlights, badges, empty states */
  --sb-flax:   #D8D3C2;  /* dividers, secondary cards */
  --sb-paper:  #EEF0E6;  /* page background */
  --sb-bark:   #14231A;  /* body text on light */
  --sb-white:  #FFFFFF;  /* surfaces, cards */
  --sb-sage-tint: #DFEAE1; /* trust-badge / pill fill */

  /* Type */
  --sb-font-head: 'Newsreader', Georgia, serif;
  --sb-font-body: 'Public Sans', system-ui, sans-serif;

  /* Radius */
  --sb-r-input: 10px;
  --sb-r-card:  16px;
  --sb-r-pill:  999px;

  /* Spacing scale (8px base) */
  --sb-1: 4px;  --sb-2: 8px;  --sb-3: 16px; --sb-4: 24px;
  --sb-5: 40px; --sb-6: 64px; --sb-7: 96px;
}

body { background: var(--sb-paper); color: var(--sb-bark); font-family: var(--sb-font-body); }
h1,h2,h3 { font-family: var(--sb-font-head); font-weight: 600; color: var(--sb-forest); }
a { color: var(--sb-leaf); }
a:hover { color: var(--sb-forest); }

/* Primary CTA — one per view, reserved for the Free Visibility Snapshot */
.sb-btn-primary {
  font: 600 15px/1 var(--sb-font-body);
  color: #fff; background: var(--sb-leaf);
  border: none; border-radius: var(--sb-r-input);
  padding: 13px 22px; cursor: pointer;
}
.sb-btn-primary:hover { background: #35664796; background: #346647; }
.sb-btn-secondary {
  font: 600 15px/1 var(--sb-font-body);
  color: var(--sb-forest); background: transparent;
  border: 1.5px solid var(--sb-forest); border-radius: var(--sb-r-input);
  padding: 12px 20px; cursor: pointer;
}
.sb-badge {
  font: 600 13px/1 var(--sb-font-body);
  color: var(--sb-forest); background: var(--sb-sage-tint);
  border-radius: var(--sb-r-pill); padding: 8px 14px;
  display: inline-flex; align-items: center; gap: 6px;
}
.sb-card { background: var(--sb-white); border: 1px solid var(--sb-flax); border-radius: var(--sb-r-card); }