/* ============================================================================
   East River Stump Removal — prospect design tokens
   Archetype C — Editorial single-column (owner-run, thin proof → restraint = pitch)
   Concept: GROWTH RINGS / CLEARED GROUND — a stump cross-section's concentric
   rings as the page's modular motif (favicon → dividers → full-bleed). Argues
   "the person you call grinds it flat and hauls it clean." Every section cites it.
   Material world (committed, non-default): warm BONE/KRAFT ground · FOREST green
   (their logo green) · BARK deep bands · ONE reserved HEARTWOOD-AMBER accent
   (a color law — rings + key marks only, per the Commercial Construction exemplar).
   Single canonical warm-LIGHT theme; fixed bark bands use theme-independent
   *-on-bark tokens so accents never fail contrast (per the craft traps).
   White-label note: IV-pitch chrome uses IV green/ink; the mockup is East River's.
   ============================================================================ */

/* --- Self-hosted display face: Newsreader (variable, subset, preloaded → font-display: optional).
       A clean, warm literary serif — restrained ligatures + a normal italic (no Fraunces wonk). --- */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 200 800;
  font-display: optional;
  src: url("assets/newsreader-var.woff2") format("woff2");
}
@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 200 800;
  font-display: optional;
  src: url("assets/newsreader-italic-var.woff2") format("woff2");
}
/* Body sans + ring-count mono */
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/plex-sans-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("assets/plex-sans-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("assets/plex-mono-400.woff2") format("woff2");
}

:root {
  /* ---- Color: the committed BONE / KRAFT world (not default white) ---- */
  --color-bone:    #efe9db;  /* warm kraft-bone — page ground */
  --color-bone-2:  #e8e0cd;  /* alt panel / recessed card */
  --color-bone-3:  #ded2b9;  /* deeper recess / rule zebra */

  /* ---- Bark: warm near-black for fixed dark bands (the cut-stump deeps) ---- */
  --color-bark:    #241c13;  /* deep bark — fixed dark bands */
  --color-bark-2:  #2f2418;  /* lifted bark panel */

  /* ---- Cut-log face (the hero stump illustration) ---- */
  --color-wood:      #d8c3a0;  /* warm sand — the sawn wood face */
  --color-wood-ring: #a2845a;  /* muted brown — growth-ring lines on the wood */
  --color-bark-rim:  #3c2c1a;  /* warm dark bark — the rough rim */

  /* ---- Ink / text on bone ---- */
  --color-ink:     #241d13;  /* headings ink on bone */
  --color-body:    #352c1e;  /* body text on bone (AA+ ≈ 10:1 on bone) */
  --color-muted:   #665b46;  /* muted text on bone (AA ≈ 5.4:1 on bone) */

  /* ---- Rules / borders (hairline earth) ---- */
  --color-line:        #cdc0a4;  /* hairline rule on bone */
  --color-line-strong: #ab9c7c;  /* stronger interior rule */

  /* ---- Forest green: the brand (their logo green) ---- */
  --color-green:       #38553b;  /* forest green on bone (AA ≈ 6.4:1) — links/labels */
  --color-green-deep:  #2b4430;  /* darker green for small text/links (AAA-ish) */
  --color-green-soft:  #4d6d4c;
  --color-green-wash:  #dbe2ccff; /* pale moss fill behind marks */

  /* ---- Heartwood amber: the ONE reserved accent (a color law: rings + key marks) ---- */
  --color-amber:      #a35a1c;  /* burnt heartwood amber on bone (AA ≈ 4.9:1) */
  --color-amber-deep: #834416;  /* darker amber for small emphasis text */
  --color-amber-wash: #f0dcc0;  /* amber tint fill */

  /* ---- Theme-independent ON-BARK tokens (for fixed deep-bark bands) ---- */
  --color-on-bark:        #efe9db;  /* bone text on bark */
  --color-on-bark-muted:  #bdb098;  /* muted text on bark (≈ 8:1 on --color-bark) */
  --color-green-on-bark:  #9cbf8f;  /* BRIGHTER green pinned for bark bands (≈ 8.6:1) */
  --color-amber-on-bark:  #e0a35a;  /* brighter amber for rings on bark (≈ 8.2:1) */
  --color-hairline-on-bark:     rgba(239, 233, 219, 0.16); /* hairline rule on bark */
  --color-hairline-on-bark-2:   rgba(239, 233, 219, 0.30); /* stronger border on bark (ghost btn) */

  /* ---- Fixed dark scrim (caption/overlay over imagery) — never theme-variable ---- */
  --scrim-bark:  rgba(24, 18, 11, 0.72);
  --scrim-soft:  rgba(24, 18, 11, 0.40);

  /* ---- Radii: organic, softened (natural, not machined) ---- */
  --radius-none: 0px;
  --radius-sm:   4px;
  --radius-md:   10px;
  --radius-lg:   18px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* ---- Spacing scale ---- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-10: 4rem;
  --space-12: 5rem;
  --space-16: 7rem;
  --space-20: 9.5rem;

  /* ---- Type families ---- */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-body:    "Plex Sans", "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono:    "Plex Mono", "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- Type scale (fluid where useful) ---- */
  --fs-label: 0.74rem;   /* mono ring-count labels — uppercase, tracked */
  --fs-xs:   0.8rem;
  --fs-sm:   0.9rem;
  --fs-base: 1.02rem;
  --fs-md:   1.15rem;
  --fs-lg:   1.4rem;
  --fs-xl:   1.85rem;
  --fs-2xl:  clamp(1.9rem, 3.4vw, 2.6rem);
  --fs-3xl:  clamp(2.4rem, 5vw, 3.6rem);
  --fs-hero: clamp(2.9rem, 7.4vw, 6rem);   /* editorial masthead */

  --lh-tight: 1.03;
  --lh-snug:  1.16;
  --lh-body:  1.68;

  --tracking-label: 0.2em;    /* mono labels */
  --tracking-tight: -0.018em; /* display headings */
  --tracking-hero:  -0.028em;

  /* ---- Layout (single-column editorial) ---- */
  --max-wide:    1140px;  /* full-bleed band inner cap */
  --max-content: 760px;   /* the editorial reading column */
  --max-mid:     920px;   /* wider bands (gallery / service area) */
  --gutter: clamp(1.15rem, 5vw, 3rem);

  /* ---- Borders (composed) ---- */
  --border-hair:   1px solid var(--color-line);
  --border-strong: 1px solid var(--color-line-strong);
  --border-hair-on-bark: 1px solid var(--color-hairline-on-bark);

  /* ---- Elevation (mostly flat; one soft lift for the estimate + proposal cards) ---- */
  --shadow-card: 0 1px 0 rgba(36, 28, 19, 0.05);
  --shadow-lift: 0 18px 44px -26px rgba(36, 28, 19, 0.5);

  /* ---- Motion ---- */
  --dur-fast: 150ms;
  --dur-mid:  340ms;
  --dur-slow: 1100ms;  /* the ring "grows" */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-ring: cubic-bezier(0.65, 0, 0.35, 1);
}