/* ============================================================
   Twisted Pine Tree Service — design tokens
   As of 2026-07-15. Palette pulled from the REAL business logo
   (hand-drawn emblem: pine + roots + chainsaw), not from the two
   learning prototypes (twisted-pine-a "Ascent" / twisted-pine-b
   "Heartwood") — those invented their own art direction for
   Brandyn's frontend-design practice. Real client deliverable is
   "redesign close to his current site + major SEO," so this kit
   is the sober, on-brand version. Verify against the live
   twistedpinetreeservice.com before shipping — not yet cross-
   checked this session (browser tool hung).
   ============================================================
   2026-08-06 refinement pass: added IBM Plex Mono (--font-mono)
   for eyebrow labels / ghost numerals -- an editorial-outdoors
   touch (oregonoutdooralliance.org-inspired). Same palette, same
   Bitter display face, existing tokens untouched.
   ============================================================ */

@font-face { font-family: 'Bitter'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/assets/fonts/bitter-latin-variable.woff2?v=20260916') format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/inter-latin-variable.woff2?v=20260916') format('woff2'); }

:root{
  --brand-name:'Twisted Pine Tree Service';

  /* ---- color: forest green + bark + chainsaw orange, on parchment ---- */
  --color-bg:#F7F3E7;              /* parchment/cream, matches the logo's banner */
  --color-surface:#EFE8D6;         /* cards, panels, alt sections */
  --color-ink:#221B12;             /* headlines — near-black bark */
  --color-body:#5B5041;            /* body text — warm bark-brown gray */
  --color-line:#DCD3BC;

  --color-primary:#6E8F2E;         /* foliage green — from the real logo */
  --color-primary-strong:#4C6320;  /* deep pine — hover / pressed */
  --color-on-primary:#FFFFFF;

  --color-accent:#D9691F;          /* chainsaw orange — from the real logo */
  --color-accent-strong:#B24F13;

  /* ---- type ---------------------------------------------------- */
  --font-display:'Bitter', Georgia, serif;     /* rugged slab, headlines */
  --font-body:'Inter', system-ui, sans-serif;  /* body / UI */

  /* ---- shape + depth ------------------------------------------- */
  --radius:10px;
  --radius-pill:999px;
  /* two-part shadow (2026-08-06 dynamic-range pass): a crisp contact
     shadow close to the edge + a soft ambient falloff, instead of one
     flat blur -- reads as real weight/lift, not a CSS default. */
  --shadow:0 1px 2px rgba(34,27,18,.18), 0 14px 30px -8px rgba(34,27,18,.22);

  /* ---- spacing -------------------------------------------------- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;
  --space-9:80px;
}