/* ============================================================================
   IDEAL Project Consultants, design tokens.
   Single source of truth, generated from tokens.md. Locked 12 October 2026.
   Nothing in the pages hardcodes a colour, size or radius; everything reads
   from the variables below.
   ========================================================================= */
:root{
  /* 1. brand */
  --brand-anchor:#1D1F17;
  --brand-accent:#4A7020;

  /* 2. neutral ramp, five steps replacing 42 */
  --neutral-0:#FFFFFF;
  --neutral-50:#F6F6F0;
  --neutral-200:#DCDFD4;
  --neutral-500:#6B7263;
  --neutral-900:#3C4336;

  /* 3. state */
  --state-hover:#3A5819;
  --state-active:#3A5819;
  --state-focus:#3A5819;

  /* 4. roles */
  --bg:var(--neutral-0);
  --surface-soft:var(--neutral-50);
  --text-primary:var(--brand-anchor);
  --text-body:var(--neutral-900);
  --text-muted:var(--neutral-500);
  --text-on-accent:#FFFFFF;
  --border:var(--neutral-200);

  /* 5. type */
  --font-display:'Poppins',sans-serif;
  --font-body:'Roboto',sans-serif;
  --text-eyebrow:12px;
  --text-caption:14px;
  --text-body-size:16px;
  --text-body-lg:18px;
  --text-h4:20px;
  --text-h3:25px;
  --text-h2:31px;
  --text-h1:39px;

  /* 6. spacing, 5px unit, the template's native rhythm */
  --space-unit:5px;
  --space-1:5px; --space-2:10px; --space-3:15px; --space-4:20px;
  --space-6:30px; --space-8:40px; --space-12:60px; --space-18:90px;
  --section-y:60px;

  /* 7. layout */
  --container:1170px;
  --grid-gutter:30px;

  /* 8. shape */
  --radius:6px;
  --radius-full:50%;
  --border-width:1px;
}
@media (max-width:767px){ :root{ --section-y:40px; } }

/* ---------- 16, 17, 19: one green, one neutral ramp, one type scale -------- */

body{font-family:var(--font-body);font-size:var(--text-body-size);line-height:1.7;
  color:var(--text-body);background:var(--bg)}

h1,h2,h3,h4,h5,.heading-lg,.heading-lead{font-family:var(--font-display);
  color:var(--text-primary);font-weight:500}
h1,.heading-lg{font-size:var(--text-h1);line-height:1.15}
h2,.heading-lead{font-size:var(--text-h2);line-height:1.2}
h3{font-size:var(--text-h3);line-height:1.25}
h4,.title{font-size:var(--text-h4);line-height:1.3}
p{font-size:var(--text-body-size);line-height:1.7;color:var(--text-body)}
p.lead{font-size:var(--text-body-lg);line-height:1.65}
.small,.photo-caption p,.table,.register td,.register th{font-size:var(--text-caption)}

/* 5: eyebrow smaller and lowercase, heading Title Case and slightly bolder */
.heading-sm-lead{font-size:var(--text-eyebrow);text-transform:lowercase;
  letter-spacing:.14em;font-weight:500;color:var(--text-muted);
  margin:0 0 var(--space-3);font-family:var(--font-body)}
h1,h2,h3,h4,.heading-lg,.heading-lead,.title{text-transform:none}

/* colour consolidation: every green becomes the one green */
.bg-primary,.btn,.call-action.bg-primary,.section-projects.bg-primary{
  background-color:var(--brand-accent)}
.btn{border-color:var(--brand-accent);color:var(--text-on-accent);
  font-family:var(--font-body);font-size:var(--text-caption);font-weight:500;
  text-transform:none;letter-spacing:.02em;padding:var(--space-3) var(--space-6);
  border-radius:var(--radius);border-width:2px;min-height:44px;line-height:1.5}
.btn:hover,.btn:focus{background-color:var(--state-hover);border-color:var(--state-hover);
  color:var(--text-on-accent)}
.btn.btn-outline{background:transparent;color:var(--brand-accent)}
.btn.btn-outline:hover,.btn.btn-outline:focus{background:var(--brand-accent);
  color:var(--text-on-accent);border-color:var(--brand-accent)}
.btn.btn-alt,.btn.btn-outline.btn-alt{background:var(--brand-accent);
  border-color:var(--brand-accent);color:var(--text-on-accent)}
.color-primary,a{color:var(--brand-accent)}
a:hover,a:focus{color:var(--state-hover)}
.bg-light,.section-logos.bg-light,.band-soft{background-color:var(--surface-soft)}

/* 5 (UX principle): a visible focus ring on everything focusable */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,.btn:focus-visible{outline:2px solid var(--state-focus);
  outline-offset:2px}

/* one radius */
.btn,.card,.feature.boxed,.fbox-photo,.cardshot,.form-control,.logo-item,
.tileshot,.capshot{border-radius:var(--radius)}
.team-photo img{border-radius:var(--radius-full)}

/* 6: paragraphs within a block run to consistent measure */
.section-content p,.content p{max-width:62ch}

/* spacing rhythm on the 5px unit */
.section-pad{padding-top:var(--section-y);padding-bottom:var(--section-y)}
.section-pad-sm{padding-top:var(--space-8);padding-bottom:var(--space-8)}
.section-pad-md{padding-top:var(--space-12);padding-bottom:var(--space-12)}