:root{
--black:#050505;--near-black:#0A0A0A;--charcoal-950:#101010;--charcoal-900:#151515;--charcoal-850:#1A1A1A;--charcoal-800:#202020;
--gray-700:#323232;--gray-600:#484848;--gray-500:#666666;--gray-400:#8A8A8A;--gray-300:#B5B5B5;--gray-200:#D4D4D4;--gray-100:#ECECEC;
--off-white:#F6F6F4;--white:#FFFFFF;
--border-on-dark:rgba(255,255,255,0.10);--border-on-light:rgba(0,0,0,0.10);
/* semantic — light context (default) */
--surface-page:var(--off-white);--surface-card:var(--white);--surface-raised:var(--white);--surface-inset:var(--gray-100);
--text-primary:var(--near-black);--text-secondary:var(--gray-500);--text-muted:var(--gray-400);
--border-default:var(--border-on-light);--border-strong:rgba(0,0,0,0.18);
--btn-bg:var(--near-black);--btn-fg:var(--white);
--focus-ring:rgba(0,0,0,0.35);
}
.theme-dark{
--surface-page:var(--near-black);--surface-card:var(--charcoal-900);--surface-raised:var(--charcoal-850);--surface-inset:var(--charcoal-950);
--text-primary:var(--white);--text-secondary:var(--gray-400);--text-muted:var(--gray-500);
--border-default:var(--border-on-dark);--border-strong:rgba(255,255,255,0.20);
--btn-bg:var(--white);--btn-fg:var(--near-black);
--focus-ring:rgba(255,255,255,0.45);
color:var(--text-primary);background:var(--surface-page);
}