/* ==========================================================================
   THEME TOKENS — change colours, fonts and spacing for the whole site here.
   ========================================================================== */
:root {
  /* Brand */
  --pine: #4a9179;          /* main accent (logo green-teal) */
  --pine-deep: #2f6a56;     /* hover / darker accent */
  --pine-soft: #e8f2ee;     /* tinted backgrounds */
  --pine-mist: #f3f8f6;     /* very light tinted section background */

  /* Neutrals */
  --ink: #0c0f0e;           /* headings, near-black like the hero title */
  --ink-soft: #3e4643;      /* body text */
  --muted: #6b7471;         /* secondary text */
  --line: #e3e7e5;          /* hairline borders */
  --bg: #ffffff;
  --bg-soft: #f5f7f6;
  --coal: #0f1412;          /* dark sections */
  --coal-2: #18201d;

  /* Hero steel backdrop (sampled from the hero photo) */
  --steel-top: #c2c9cf;
  --steel-mid: #d7dbe0;
  --steel-bottom: #e0e4e7;

  /* Fonts */
  --font-display: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  /* Layout */
  --container: 82.5rem;       /* grows with the fluid root size (see base.css) */
  --gutter: clamp(1rem, 3.5vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8rem);
  --radius: 0.375rem;
  --radius-lg: 0.875rem;
  --header-h: 4.5rem;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.8s;

  --shadow-sm: 0 1px 2px rgba(12, 15, 14, 0.06);
  --shadow: 0 0.625rem 1.875rem -0.75rem rgba(12, 15, 14, 0.18);
  --shadow-lg: 0 1.875rem 3.75rem -1.25rem rgba(12, 15, 14, 0.28);
}