:root{
/* --- Green ramp (perceptual / Oklab, from the Modas logo gradient #066C3A -> #8CC63F) --- */
--green-900:#04331B;--green-800:#066C3A;--green-700:#1D753C;--green-600:#2D7D3D;--green-500:#3A863E;--green-400:#478F3F;--green-300:#539840;--green-200:#6AAA40;--green-100:#8CC63F;--green-050:#B1EE6A;--green-tint:#E7FBEC;--green-tint-deep:#DDF1E2;
/* --- Neutrals --- */
--white:#FFFFFF;--grey-700:#4A4A4A;--grey-500:#6E7B72;--mint-line:#CBE8E0;
/* --- Brand & accent --- */
--color-primary:var(--green-800);        /* deep green: statement bands, secondary fills, links */
--color-accent:var(--green-100);         /* light green: FILL ONLY, never text */
--color-accent-on-dark:var(--green-050); /* the only accent legible as text on deep green */
/* --- Surfaces --- */
--surface-canvas:var(--white);
--surface-mint:var(--green-tint);
--surface-mint-deep:var(--green-tint-deep);
--surface-green:var(--green-800);
--surface-green-ink:var(--green-900);
--surface-green-mid:var(--green-500);    /* form fills on dark, hover surfaces */
/* --- Text --- */
--text-ink:var(--green-900);
--text-body:var(--grey-700);
--text-muted:var(--grey-500);
--text-on-dark:var(--white);
--text-muted-on-dark:#B7D3C3;            /* >=18px or 14px bold only (4.08:1 on #066C3A) */
/* --- Lines --- */
--hairline-mint:var(--mint-line);
--hairline-on-dark:rgba(255,255,255,0.18);
--divider-accent:var(--green-100);
/* --- Feedback --- */
--color-error:#B3261E;
/* --- Gradients --- */
--gradient-brand:linear-gradient(135deg,#066C3A 0%,#8CC63F 100%); /* @kind color */ /* LOGO ONLY */
--gradient-photo-scrim:linear-gradient(180deg,rgba(4,51,27,0) 0%,rgba(4,51,27,0.82) 100%); /* @kind color */
}