/* ============================================================
   Furrow - design tokens
   ------------------------------------------------------------
   Lifted from the Furrow design system (_ds/tokens/*) in the
   design project, trimmed to what these four pages actually use.

   Colour budget: charcoal + white do the heavy lifting; Paddock
   green carries structure and secondary action; Harvest orange
   is THE single focal device per view - one CTA, or the tagline
   capsule, or the 3px keyline. Never all three at once.

   Do not hard-code hex values in markup or page CSS. Add a token.
   ============================================================ */

:root {
  /* ---- Foundation ---- */
  --iron: #2B2B2B;      /* charcoal field - dark bands, footer, hero scrim base */
  --soil: #232323;      /* near-black - body ink on light, footer */
  --paddock: #64A439;   /* Furrow green - structure, secondary action */
  --crop: #408732;      /* dark green - hover/active, green text on light */
  --leaf: #8FC963;      /* light green - eyebrows and links on dark */

  --iron-deep: #1F1F1F; /* hero base under the photo scrim */
  --iron-lift: #383837; /* raised card on a dark band */

  /* ---- Focal warm - the spark ---- */
  --harvest: #F1901C;       /* THE focal device */
  --harvest-hover: #D97F12; /* only ever the hover of a Harvest CTA */
  --stubble: #F5F3EE;       /* the branded "white" - warm light band */

  /* ---- Neutrals ---- */
  --white: #FFFFFF;
  --gravel: #6E7069;      /* captions and secondary text - see note below */
  --hairline: #DEDCD4;    /* borders and rules on light */
  --hazard: #C64B33;      /* SAFETY / error semantics only, never decoration */

  /* Body ink on light. #555 in the approved designs; kept as a token so a
     single edit lifts contrast everywhere if the client wants it darker. */
  --text-body-soft: #555555;

  /* On dark */
  --on-dark: rgba(255, 255, 255, 0.92);
  --on-dark-muted: rgba(255, 255, 255, 0.75);
  --on-dark-faint: rgba(255, 255, 255, 0.6);
  --border-on-dark: rgba(255, 255, 255, 0.14);

  /* ---- Type ---- */
  --font-display: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --w-regular: 400;
  --w-semibold: 600;
  --w-bold: 700;
  --w-heavy: 800;

  /* Fluid display scale - matches the approved pages exactly */
  --d-hero: clamp(34px, 4.4vw, 56px);   /* home h1 */
  --d-hero-sm: clamp(32px, 4.2vw, 52px);/* inner-page h1 */
  --d-1: clamp(28px, 3.4vw, 42px);      /* dark-band h2 */
  --d-2: clamp(26px, 3vw, 36px);        /* section h2 */
  --d-tool: clamp(26px, 3.2vw, 40px);   /* calculator tool h2 */
  --d-strip: clamp(22px, 2.4vw, 28px);  /* orange cross-sell strip h2 */
  --d-3: 22px;
  --d-4: 19px;
  --d-5: 17px;

  --t-lead: clamp(16px, 1.6vw, 19px);
  --t-lead-sm: clamp(16px, 1.6vw, 18.5px);
  --t-lg: 16px;
  --t-base: 15px;
  --t-sm: 14.5px;
  --t-card: 13.5px;
  --t-xs: 13px;
  --t-fine: 11.5px;

  --lh-display: 1.08;
  --lh-tight: 1.12;
  --lh-snug: 1.35;
  --lh-body: 1.65;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.12em;
  --ls-eyebrow-wide: 0.16em;
  --ls-label: 0.05em;
  --ls-btn: 0.04em;

  /* ---- Space ---- */
  --wrap: 1180px;
  --gutter: 24px;
  --band-y: clamp(56px, 7vw, 84px);
  --band-y-tool: clamp(52px, 7vw, 80px);
  --hero-y: clamp(56px, 8vw, 100px);
  --hero-y-sm: clamp(56px, 8vw, 96px);

  /* ---- Radii ---- */
  --r-sm: 3px;
  --r-md: 4px;
  --r-lg: 6px;
  --r-xl: 8px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-card: 0 2px 10px rgba(35, 35, 35, 0.05);
  --shadow-card-hover: 0 10px 26px rgba(35, 35, 35, 0.14);
  --shadow-panel: 0 8px 24px rgba(35, 35, 35, 0.1);
  --shadow-tool: 0 12px 34px rgba(35, 35, 35, 0.12);
  --shadow-form: 0 24px 60px rgba(0, 0, 0, 0.3);
  --shadow-float: 0 18px 44px rgba(0, 0, 0, 0.32);
  --shadow-cover: 0 20px 44px rgba(0, 0, 0, 0.5);

  /* ---- Focus ----
     3px Paddock ring, per the accessibility bar. Kept as one token so the
     ring can never drift between controls. */
  --focus-ring: 0 0 0 3px rgba(100, 164, 57, 0.45);
  --focus-ring-input: 0 0 0 3px rgba(100, 164, 57, 0.25);

  /* Minimum comfortable touch target - phone in a ute. */
  --tap: 44px;
}

/* --------------------------------------------------------------
   Contrast note (WCAG 2.1 AA)

   Gravel #6E7069 on white is 4.62:1 - it passes AA for normal text
   (>=4.5:1) but has no headroom, so it is used ONLY at >=600 weight
   or >=13px in this build, never for long-form body copy. Body copy
   on light uses --text-body-soft #555 (7.0:1) or --soil (15.3:1).
   If the client ever wants Gravel smaller, darken the token rather
   than shrinking the type.
   -------------------------------------------------------------- */