:root{
--ypi-green-500:#2CA837;
--ypi-green-700:#148324;
--ypi-green-300:#77C081;
--off-black:#1C1C1C;
--soft-white:#FEFEFE;
--white:#FFFFFF;
--ypi-green-500-rgb:44,168,55; /* @kind other */
--ypi-green-700-rgb:20,131,36; /* @kind other */

--color-bg:var(--soft-white);
--color-bg-inverse:var(--off-black);
--color-surface:var(--white);
--color-surface-sunken:#F2F6F2;
--color-border:#D9E3DA;
--color-border-strong:var(--off-black);

--color-text:var(--off-black);
--color-text-muted:#4A524B;
/*
  Fixed literal, not var(--soft-white): the theme repurposes --soft-white and
  --white as surface/background roles in dark mode (see js/theme.js and
  css/theme.css), so aliasing this to --soft-white made the label go
  near-black on a green/dark fill the instant a visitor switched themes. A
  light label on a saturated fill or a dark surface needs to stay light in
  both themes, so pin it to the light-mode white directly.
*/
--color-text-on-dark:#FEFEFE;
--color-text-on-green:#FEFEFE;

--color-primary:var(--ypi-green-500);
--color-primary-hover:var(--ypi-green-700);
--color-primary-active:#0F6B1D;
--color-primary-soft:#E4F4E6;
--color-secondary:var(--ypi-green-700);
--color-accent-interface:var(--ypi-green-300);

--color-focus-ring:var(--ypi-green-700);
--color-success:var(--ypi-green-500);
--color-danger:#C4362B;
--color-warning:#B8862B;
}