/* === CGP Brand Colors (Phase 1: color only) === */
:root{
  --cgp-primary:#6DA642;
  --cgp-dark:#105131;
}

/* Keep layout untouched; only update color accents */
a{
  color: var(--cgp-dark);
}
a:hover{
  color: var(--cgp-primary);
}

/* Buttons / primary CTAs: safely target common patterns */
button, .btn, .button, a[role="button"]{
  accent-color: var(--cgp-primary);
}

/* If Tailwind classes are used for borders/backgrounds, apply light brand accents */
header, nav{
  border-color: var(--cgp-primary);
}

/* Make focus states match brand */
:focus-visible{
  outline: 2px solid var(--cgp-primary);
  outline-offset: 2px;
}

/* Existing (kept for continuity) */
:root{
  --cgp-primary:#6DA642;
  --cgp-dark:#105131;
}

/* Optional: ensure links/buttons have consistent focus styles */
a:focus, button:focus{
  outline: 2px solid var(--cgp-primary);
  outline-offset: 2px;
}

/* === CGP Brand Overrides (force win over Tailwind CDN output) === */
a, a.text-slate-700, a.text-slate-600, a.text-slate-900{
  color: var(--cgp-dark) !important;
}
a:hover, a.hover\:text-slate-700:hover{
  color: var(--cgp-primary) !important;
}

/* Swap key slate accents to CGP greens (keeps structure the same) */
.bg-slate-900{ background-color: var(--cgp-dark) !important; }
.hover\:bg-slate-800:hover{ background-color: var(--cgp-primary) !important; }

/* Focus ring/outline */
:focus-visible{
  outline-color: var(--cgp-primary) !important;
  box-shadow: 0 0 0 3px rgba(109,166,66,0.35) !important;
}

/* === CGP Brand (Phase 1A: subtle + premium) ===
   Goal: reduce grayscale feel by gently tinting light backgrounds/borders.
   Structure/classes remain unchanged.
*/
:root{
  --cgp-tint-50: #F4FBF1;   /* very light green tint */
  --cgp-tint-100:#ECF7E7;   /* light green tint */
  --cgp-tint-200:#DDF0D6;   /* slightly stronger tint */
  --cgp-border: #CFE7C6;    /* soft green border */
}

/* Replace common slate backgrounds with subtle CGP tints */
.bg-slate-50{  background-color: var(--cgp-tint-50) !important; }
.bg-slate-100{ background-color: var(--cgp-tint-100) !important; }
.bg-slate-200{ background-color: var(--cgp-tint-200) !important; }

/* Softly brand common borders/dividers if present */
.border-slate-200, .border-slate-100{
  border-color: var(--cgp-border) !important;
}

/* Keep text readable (no green paragraphs); only accents */
.text-slate-900{ color: var(--cgp-dark) !important; }

/* === CGP Brand (Option B: more branded, still professional) ===
   Goal: clearly feel CGP without redesign.
*/

/* Stronger brand tints */
:root{
  --cgp-tint-300:#C7E7BC;
  --cgp-tint-400:#B3DFA6;
}

/* Promote primary green in common accent areas */
.bg-slate-300{ background-color: var(--cgp-tint-300) !important; }
.bg-slate-400{ background-color: var(--cgp-tint-400) !important; }

/* Buttons / CTA emphasis */
a[role="button"], .btn, .button{
  background-color: var(--cgp-primary) !important;
  color: #ffffff !important;
}
a[role="button"]:hover, .btn:hover, .button:hover{
  background-color: var(--cgp-dark) !important;
}

/* Section headers get a subtle green underline */
h2, h3{
  border-bottom: 2px solid rgba(109,166,66,0.35);
  padding-bottom: .25rem;
}

/* Icons / emphasis text lean into primary */
.text-slate-700, .text-slate-600{
  color: var(--cgp-dark) !important;
}