:root{
  /* ---- Base palette ---- */
  --green-500:#00BC60;      /* SynxZap Green — the brand accent */
  --green-600:#00A554;      /* pressed / darker accent */
  --green-400:#1FD37B;      /* hover / lighter accent */
  --green-100:#D6F7E6;      /* tint fill */
  --green-050:#EEFCF4;      /* faintest wash */

  --black:#000000;
  --charcoal:#2B2B2B;
  --grey-700:#4A4A4A;
  --grey-500:#7A7A7A;
  --grey-300:#C9C9C9;
  --grey-200:#E4E4E4;
  --grey-100:#F5F5F5;       /* Soft Grey / Off White */
  --white:#FFFFFF;

  /* Semantic status (used sparingly, product UI only) */
  --amber-500:#F2A118;
  --red-500:#E03A2F;
  --blue-500:#1E7BE0;

  /* ---- Semantic aliases ---- */
  --brand:var(--green-500);
  --brand-hover:var(--green-400);
  --brand-press:var(--green-600);
  --brand-tint:var(--green-100);
  --brand-wash:var(--green-050);

  --text-strong:var(--black);
  --text-body:var(--charcoal);
  --text-muted:var(--grey-500);
  --text-accent:var(--green-500);
  --text-on-brand:var(--white);
  --text-on-dark:var(--white);

  --surface-page:var(--white);
  --surface-soft:var(--grey-100);
  --surface-card:var(--white);
  --surface-dark:var(--black);
  --surface-brand:var(--green-500);

  --border-hairline:var(--grey-200);
  --border-strong:var(--grey-300);
  --border-brand:var(--green-500);

  --ghost-type:var(--grey-100);          /* oversized background typography */
  --ghost-type-brand:var(--green-050);
  --focus-ring:color-mix(in oklab, var(--green-500) 45%, transparent);
}