:root{
  /* --- Brand green ramp (sampled from the mockups) --- */
  --green-900:#2f6a06;
  --green-700:#438f0e;
  --green-600:#4da211;   /* primary brand green — buttons, links, active state */
  --green-500:#75b747;
  --green-400:#7ab65b;
  --green-200:#b4d3a6;
  --green-050:#eef6e8;

  /* --- Neutral ramp --- */
  --white:#ffffff;
  --grey-050:#f7f7f7;   /* card / panel fill */
  --grey-100:#eeeeee;   /* secondary button fill */
  --grey-200:#e6e6e6;   /* borders, chat bubbles */
  --grey-300:#dfdfdf;
  --grey-400:#cccccc;   /* dimmed overlay page */
  --grey-500:#a4a4a4;   /* disabled / secondary label */
  --grey-600:#999999;   /* muted body copy */
  --grey-700:#666666;
  --grey-800:#4a4a4a;
  --grey-900:#333333;   /* primary text */
  --black:#000000;

  /* --- Semantic aliases --- */
  --brand:var(--green-600);
  --brand-hover:var(--green-700);
  --brand-active:var(--green-900);
  --brand-soft:var(--green-050);

  --text-heading:var(--grey-900);
  --text-body:var(--grey-700);
  --text-muted:var(--grey-600);
  --text-disabled:var(--grey-500);
  --text-inverse:var(--white);
  --text-link:var(--green-600);
  --text-on-brand:var(--white);

  --surface-page:var(--white);
  --surface-card:var(--grey-050);
  --surface-sunken:var(--grey-100);
  --surface-overlay:var(--white);
  --surface-scrim:rgba(0,0,0,.22);
  --surface-brand:var(--green-600);

  --border-default:var(--grey-200);
  --border-strong:var(--grey-400);
  --border-field:var(--grey-200);
  --border-focus:var(--green-600);

  --status-online:var(--green-600);
  --status-offline:var(--grey-500);

  /* Image protection gradient used under full-bleed hero photography */
  --scrim-hero:linear-gradient(180deg,rgba(0,0,0,.10) 0%,rgba(0,0,0,0) 35%); /* @kind color */
  /* Fade that hides scroll overflow above the footer */
  --scrim-fade-down:linear-gradient(180deg,rgba(255,255,255,0) 0%,#fff 100%); /* @kind color */
}