/* ============================================================
   Parker - brand stylesheet
   Palette and type per the Oct 2026 brand direction.
   One colour dominates (cream), two support (greens), one accent (lime).
   Edit here; every page inherits.
   ============================================================ */

:root{
  /* --- brand scale --- */
  --green-900: #143A2D;   /* dark bg, headline on cream */
  --green-800: #1C4838;   /* card on dark */
  --green-700: #3A5D4E;   /* card border on dark */
  --green-600: #2F6A4F;   /* eyebrow, link, secondary button */
  --green-300: #9BB3A5;   /* muted on dark */
  --green-200: #C2D6C9;   /* body on dark */
  --lime-500:  #D3E97B;   /* accent, primary button */
  --lime-100:  #E9F2C4;   /* soft highlight, hover */
  --cream-100: #F6F0E2;   /* light bg, headline on dark */
  --sand-300:  #D8D2C2;   /* hairline, card border on cream */
  --ink-700:   #3C4F45;   /* body on cream */
  --ink-500:   #5C6D63;   /* muted on cream */
  --red-600:   #9B3B32;   /* risk only */
  --white:     #FFFFFF;

  /* --- role aliases used throughout the markup --- */
  --ink:      var(--green-900);
  --muted:    var(--ink-500);
  --canvas:   var(--cream-100);
  --surface:  var(--white);
  --line:     var(--sand-300);
  --orange:   var(--green-600);   /* text-safe accent */
  --coral:    var(--lime-500);    /* decorative only, never text */

  /* --- legacy aliases (old markup keeps resolving) --- */
  --navy:#143A2D; --teal:#2F6A4F; --gold:#D3E97B; --clay:#9B3B32;
  --tint:#FFFFFF; --paper:#F6F0E2;
  --os-cream:#FFFFFF; --os-paper:#F6F0E2; --os-ink:#143A2D; --os-muted:#5C6D63;
}

/* ---------- Typography ---------- */
body{
  font-family:'IBM Plex Sans',Arial,Helvetica,sans-serif !important;
  font-weight:400; color:var(--ink-700) !important;
  font-size:16px; line-height:1.65;
  background-color:var(--cream-100) !important; background-image:none !important;
  -webkit-font-smoothing:antialiased;
}
@media (min-width:768px){ body{ font-size:17px; } }
html{ scroll-behavior:smooth; }

h1,h2,h3,h4{
  font-family:'Source Serif 4',Georgia,'Times New Roman',serif !important;
  font-weight:600 !important; letter-spacing:-0.01em;
  text-wrap:balance; color:var(--green-900) !important;
}
p{ text-wrap:pretty; }
.font-mono,code,kbd,samp{ font-family:'IBM Plex Mono',ui-monospace,monospace; }

/* ---------- Eyebrow / section label ---------- */
.eyebrow{
  font-family:'IBM Plex Sans',Arial,sans-serif !important;
  font-size:.72rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--green-600) !important;
}
.on-dark .eyebrow,.os-dark .eyebrow{ color:var(--lime-500) !important; }

/* ---------- Accent word: green text + thick lime underline ----------
   The signature move. One per heading, never more.                     */
.os-mark-gold,.os-mark-teal,.os-underline{
  background:none !important; padding:0 !important;
  color:var(--green-600) !important;
  text-decoration:underline;
  text-decoration-color:var(--lime-500);
  text-decoration-thickness:4px;
  text-underline-offset:6px;
}

/* ---------- Surfaces ---------- */
.os-card,.os-card-white{
  background:var(--white) !important;
  border:1px solid var(--sand-300) !important;
  border-radius:16px !important;
  box-shadow:none !important;
}
section{ position:relative; }

/* ---------- Dark bands ---------- */
.os-dark,.on-dark{ background:var(--green-900) !important; color:var(--green-200) !important; }
.os-dark h1,.os-dark h2,.os-dark h3,.os-dark h4,
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--cream-100) !important; }
.os-dark .os-card,.on-dark .os-card{
  background:var(--green-800) !important; border-color:var(--green-700) !important;
}
.os-dark a,.on-dark a{ color:var(--lime-500); }

/* ---------- Buttons ---------- */
.os-btn-primary{ background:var(--lime-500) !important; color:var(--green-900) !important; }
.os-btn-secondary{
  background:transparent !important; color:var(--green-600) !important;
  border:1px solid var(--green-600) !important;
}
.os-dark .os-btn-secondary,.on-dark .os-btn-secondary{
  color:var(--lime-500) !important; border-color:var(--lime-500) !important;
}

/* ---------- Utilities ---------- */
.os-navy{ color:var(--green-900); }
.os-bg-navy,.os-bg-ink{ background:var(--green-900) !important; }
.os-teal,.os-gold{ color:var(--green-600) !important; }
.os-bg-teal{ background:var(--green-600) !important; }
.os-clay{ color:var(--red-600); }
.os-above{ position:relative; z-index:1; }
.os-orb{ display:none !important; }   /* retired: flat surfaces only */

/* ---------- Navigation ---------- */
.osNavBtn.active{ background:rgba(20,58,45,.07) !important; }
.osDdItem.active{ background:rgba(47,106,79,.10) !important; color:var(--green-600) !important; }
.os-nav{ background:rgba(246,240,226,.88) !important; }
.os-nav-links a.active{ background:rgba(20,58,45,.07) !important; }
.os-nav-cta{ background:var(--lime-500) !important; color:var(--green-900) !important; }
.os-nav-dd-menu a:hover{ background:var(--lime-100) !important; }

/* ---------- Tailwind neutral scale remapped to the brand ----------
   The pages lean on Tailwind's neutral utilities. Rather than rewrite
   every class, retarget them so the palette holds site-wide.          */
.text-neutral-900,.text-neutral-800{ color:var(--green-900) !important; }
.text-neutral-700{ color:var(--ink-700) !important; }
.text-neutral-600,.text-neutral-500{ color:var(--ink-500) !important; }
.text-neutral-400,.text-neutral-300,.text-neutral-200{ color:var(--green-300) !important; }
.bg-neutral-50,.bg-neutral-100{ background-color:var(--lime-100) !important; }
.bg-neutral-200,.bg-neutral-300{ background-color:var(--sand-300) !important; }
.bg-neutral-900,.bg-black{ background-color:var(--green-900) !important; }
.border-neutral-900{ border-color:var(--green-900) !important; }
.border-neutral-200,.border-neutral-300,.border-black\/10{ border-color:var(--sand-300) !important; }
.hover\:bg-black:hover{ background-color:var(--green-800) !important; }
.hover\:text-neutral-900:hover{ color:var(--green-900) !important; }