/* Conductor Electric — design tokens (source: DESIGN-HANDOFF.md + approved Main mockup) */
:root {
  /* brand color */
  --green-primary: #228050;
  --green-bright: #39B061;
  --green-deep: #0D4230;
  --green-hill: #193929;
  --green-tint: #7FD79C;
  --green-tint-strong: #A9E4BC;
  --green-accent: #4FC97B;
  --green-hover: #5BC97F;

  /* ground + text */
  --ground-dark: #0A0F0C;
  --text-on-dark: #E9F1EC;
  --text-on-dark-soft: #8CA396;
  --text-dark: #272626;
  --text-white: #FFFFFF;
  --text-lede: #E2EDE5;
  --text-card: #DCE8E1;
  --text-trust: #DCEADF;
  --text-muted: #A7BCB0;
  --text-sep: #9FC0A9;
  --text-dim: #6E8579;
  --cta-ink: #06110B;

  /* surface recipes */
  --surface-frosted: rgba(250, 252, 250, 0.42);
  --surface-glass: rgba(8, 14, 11, 0.55);
  --surface-card: rgba(255, 255, 255, 0.03);
  --surface-scrim: rgba(8, 14, 11, 0.66);
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-soft: rgba(255, 255, 255, 0.08);
  --fill-green-soft: rgba(57, 176, 97, 0.15);
  --fill-green-tile: rgba(57, 176, 97, 0.14);
  --border-green-soft: rgba(57, 176, 97, 0.22);
  --border-green-mid: rgba(57, 176, 97, 0.3);
  --border-green-tile: rgba(57, 176, 97, 0.38);
  --border-green-card: rgba(57, 176, 97, 0.35);
  --border-green: rgba(57, 176, 97, 0.4);
  --border-green-strong: rgba(57, 176, 97, 0.5);
  --blur-header: 14px;

  /* responsive frame — top-of-ladder values. The ladder that steps them down
     lives at the end of main.css. Nothing here changes at or above 1440px. */
  --shell-pad: min(64px, 4.45vw);   /* 64px at 1440 and up; shrinks below */
  --gutter: 72px;                   /* section inner gutter */
  --gutter-hero: 120px;             /* the hero's own wider inset */
  --hdr-pad: 66px;                  /* inside the angled header bar */
  /* Inner-page hero inset. Not a number of its own: it is exactly where the
     logo starts and where the CTA button ends, so hero copy that reaches the
     edge lands on the header's own left and right edges at every width the
     desktop bar is visible. Overridden below 1024px, where that bar is gone. */
  --phero-pad: calc(var(--shell-pad) + var(--hdr-pad));
  --header-block: 119px;            /* 26px header offset + 93px bar = what the hero pays for */
  --hill-h: 140px;
  --band-pull: -124px;              /* the CTA band's overlap onto the crew photo */

  /* the two fixed 60-degree cuts that bookend the fluid header bar */
  --hdr-cut-w: 62px;
  /* mobile bar: 62/93 keeps the cut at the same angle at a shorter height */
  --mheader-h: 64px;
  --mcut-h: var(--mheader-h);
  --mcut-w: calc(var(--mheader-h) * 0.6667);
  --hdr-cut-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 93'%3E%3Cpath d='M10 0L62 0L62 93Q54 93 49.98 86.08L5.02 8.65Q0 0 10 0Z'/%3E%3C/svg%3E");
  --hdr-cut-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 62 93'%3E%3Cpath d='M0 0L52 0Q62 0 56.98 8.65L13.02 84.35Q8 93 0 93Z'/%3E%3C/svg%3E");
  --blur-glass: 12px;
  --blur-band: 10px;
  --blur-scrim: 8px;
  --shadow-lift: 0 24px 64px rgba(0, 0, 0, 0.45);

  /* type */
  --font-heading: Montserrat, "Trebuchet MS", system-ui, sans-serif;
  --font-condensed: "Saira Semi Condensed", "Arial Narrow", sans-serif;

  /* radius (halved system — Brad's rule; no pill/lozenge shapes anywhere) */
  --radius-lg: 10px;
  --radius-md: 8px;
  --radius-sm: 6px;
  --radius-xs: 5px;

  /* the signature 60° cut (from the logo hexagon's sides): inset = height / tan(60°) ≈ height × 0.577 */
  --angle-tan: 0.5774;

  /* the green halo on emphasised headline words */
  --glow-green: 0 0 34px rgba(57, 176, 97, 0.95), 0 0 14px rgba(127, 215, 156, 0.8), 0 0 5px rgba(169, 228, 188, 0.9);
  /* headline legibility over the hill green and over photography */
  --shadow-on-hill: 0 2px 8px rgba(4, 8, 6, 0.95), 0 5px 28px rgba(4, 8, 6, 0.75);

  /* Nav-strip glow. Deliberately not --glow-green: that is 34px of blur for a
     section headline with room to bloom, and the strip's clip-path leaves only
     10px above and below the text, so a 34px spread is simply cut off. Same
     three-stop structure — wide wash, mid ring, tight core — rescaled to the
     band it has to live in. The soft variant is the hover; the full one marks
     the current page. */
  --glow-nav: 0 0 16px rgba(57, 176, 97, 0.95), 0 0 7px rgba(127, 215, 156, 0.85), 0 0 3px rgba(169, 228, 188, 0.9);
  --glow-nav-soft: 0 0 13px rgba(57, 176, 97, 0.62), 0 0 5px rgba(169, 228, 188, 0.55);

  /* motion */
  --hover-ease: 0.2s ease;
  --sweep-ease: 0.45s ease;
}