/* ============================================================================
   type-system.css — the site's shared typography + text-color tokens.
   ONE scale, ONE color hierarchy for the green-accent system (home, about,
   services, contact + shared nav/footer). Case-study/project pages keep their
   own warm palette (technical.css / project.css) and are intentionally excluded.

   Phase 1 (now): tokens defined + text colors unified.
   Phase 2 (later): the --fs-* scale applied per page, verified page by page.
   ============================================================================ */
:root {
  /* ---- accent (small labels / eyebrows / section identifiers ONLY) ---- */
  --accent: #35E07F;              /* on DARK backgrounds */
  --accent-ink: #00944F;          /* on LIGHT backgrounds — darker for contrast */

  /* ---- text on DARK backgrounds ---- */
  --tx-1: #FFFFFF;                 /* primary: headings, key copy */
  --tx-2: rgba(255, 255, 255, 0.72); /* secondary: body copy */
  --tx-3: rgba(255, 255, 255, 0.5);  /* tertiary: muted / captions */
  --tx-4: rgba(255, 255, 255, 0.38); /* faint: meta */

  /* ---- text on LIGHT backgrounds ---- */
  --tx-d1: #0A0B0A;                /* primary (near-black) */
  --tx-d2: rgba(10, 11, 10, 0.62); /* secondary */
  --tx-d3: rgba(10, 11, 10, 0.42); /* tertiary */

  /* ---- responsive type scale (clamp) — for Phase 2 ---- */
  --fs-display: clamp(56px, 8vw, 132px);  /* page hero titles */
  --fs-h1:      clamp(40px, 5.4vw, 84px);
  --fs-h2:      clamp(30px, 3.4vw, 52px);
  --fs-h3:      clamp(22px, 2.1vw, 34px);
  --fs-h4:      clamp(19px, 1.5vw, 24px);
  --fs-lead:    clamp(17px, 1.25vw, 19px); /* intro paragraphs */
  --fs-body:    clamp(15px, 1.05vw, 16px);
  --fs-sm:      clamp(13px, 0.95vw, 14px);
  --fs-eyebrow: 11px;                      /* small tracked uppercase labels */

  /* ---- line-height + tracking ---- */
  --lh-tight: 0.98;
  --lh-snug:  1.14;
  --lh-body:  1.6;
  --ls-eyebrow: 0.2em;
}