:root{
/* — Brand primitives (sampled from mildmen-logo.svg) — */
--ink:#14181F;
--green:#00D973;

/* — Green ramp — */
--green-50:#E8FCF2;
--green-100:#C9F7E1;
--green-200:#93EFC4;
--green-300:#4CE4A0;
--green-400:#00D973;
--green-500:#00B861;
--green-600:#00954F;
--green-700:#07713E;
--green-800:#0B4E2C;
--green-900:#0A3220;

/* — Neutral ramp — */
--paper:#FFFFFF;
--n-50:#F6F7F8;
--n-100:#EDEEF0;
--n-200:#DEE0E3;
--n-300:#C4C7CC;
--n-400:#9CA1A8;
--n-500:#767B82;
--n-600:#565B62;
--n-700:#3B3F45;
--n-800:#26282C;
--n-900:#14181F;
--n-950:#0A0D12;

/* — Semantic: text — */
--text-strong:var(--ink);
--text-body:var(--n-700);
--text-muted:var(--n-500);
--text-faint:var(--n-400);
--text-inverse:var(--paper);
--text-inverse-muted:var(--n-300);

--text-accent:var(--green-700);
--text-link:var(--ink);
--text-link-hover:var(--green-700);

/* — Semantic: surfaces — */
--surface-page:var(--paper);
--surface-raised:#FFFFFF;
--surface-sunken:var(--n-50);
--surface-card:#FFFFFF;
--surface-inverse:var(--ink);
--surface-inverse-raised:#1C2028;
--surface-accent:var(--green-400);
--surface-accent-soft:var(--green-50);

/* — Semantic: lines — */
--border-hairline:rgba(20,24,31,.10);
--border-subtle:var(--n-200);
--border-strong:var(--n-300);
--border-inverse:rgba(255,255,255,.16);
--border-accent:var(--green-400);

/* — Semantic: interaction — */
--focus-ring:var(--green-500);
--selection-bg:var(--green-200);
--selection-fg:var(--ink);

/* — Imagery — */
--photo-tint:rgba(20,24,31,.28);
--photo-scrim:linear-gradient(180deg,rgba(20,24,31,0) 0%,rgba(20,24,31,.12) 45%,rgba(20,24,31,.78) 100%); /* @kind other */
--photo-scrim-top:linear-gradient(180deg,rgba(20,24,31,.62) 0%,rgba(20,24,31,0) 70%); /* @kind other */
}
[data-theme="ink"]{
--surface-page:var(--ink);
--surface-raised:#1C2028;
--surface-sunken:#101318;
--surface-card:#1C2028;
--text-strong:var(--paper);
--text-body:var(--n-200);
--text-muted:var(--n-400);
--text-faint:var(--n-500);
--text-accent:var(--green-300);
--text-link:var(--paper);
--text-link-hover:var(--green-300);
--border-hairline:rgba(255,255,255,.12);
--border-subtle:rgba(255,255,255,.16);
--border-strong:rgba(255,255,255,.28);
}
