:root{
/* base */
--m45-black:#212121;
--m45-dark-grey:#2f2f36;
--m45-aluminum:#d4d4d4;
--m45-aluminum-light:#e6e6e6;
--m45-aluminum-dark:#b8b8b8;
--m45-white:#ffffff;
--m45-off-white:#FAFAFA;
--m45-mint:#10B981;
--m45-mint-dim:#10B98126;
--m45-mint-deep:#0c8f65;

/* semantic surfaces */
--surface-page:var(--m45-off-white);
--surface-card:var(--m45-aluminum);
--surface-card-alt:var(--m45-aluminum-light);
--surface-dark:var(--m45-black);
--surface-dark-alt:var(--m45-dark-grey);
--surface-sunken:#c7c7c7;

/* semantic text */
--text-primary:var(--m45-black);
--text-secondary:#54545a;
--text-on-dark:var(--m45-off-white);
--text-on-dark-secondary:#b9b9bd;
--text-accent:var(--m45-mint-deep);

/* borders */
--border-subtle:#bcbcbc;
--border-on-dark:#45454c;
--border-strong:var(--m45-black);

/* accent usage - restrained, small-scale only */
--accent:var(--m45-mint);
--accent-hover:var(--m45-mint-deep);
--accent-soft-bg:var(--m45-mint-dim);

/* shadows */
--shadow-color:220 8% 10%;
--shadow-sm:0 1px 2px hsl(var(--shadow-color)/0.10);
--shadow-md:0 4px 12px hsl(var(--shadow-color)/0.12);
--shadow-lg:0 12px 32px hsl(var(--shadow-color)/0.16);
--shadow-inset:inset 0 1px 0 hsl(0 0% 100%/0.4);
}