:root{
/* --- Base neutrals: cool ink, near-white surfaces --- */
--ink-950:#0B0E13;--ink-900:#10141A;--ink-800:#171C24;--ink-700:#222833;--ink-600:#39414F;
--slate-500:#5B6472;--slate-400:#818B99;--slate-300:#AFB7C2;--slate-200:#D8DDE4;--slate-100:#E7EBF0;
--paper-50:#F6F8FA;--paper-25:#FBFCFD;--white:#FFFFFF;

/* --- Clay: the brand accent, carried over from the previous site's stamp red --- */
--clay-700:#7E1A20;--clay-600:#8F1E25;--clay-500:#A4222A;--clay-400:#C4574F;--clay-200:#EFC9C4;--clay-50:#F9ECEA;

/* --- Signal green: reserved for connection state, never for actions --- */
--signal-700:#08704A;--signal-600:#0A8A5A;--signal-500:#0FA968;--signal-400:#3FC189;--signal-200:#A9E6CC;--signal-50:#E8F7F0;

/* --- Semantics --- */
--amber-600:#B07800;--amber-500:#D69B12;--amber-50:#FDF4E3;
--rose-600:#C23A34;--rose-500:#D6453D;--rose-50:#FDEDEC;
--azure-600:#1F5FA8;--azure-500:#2B77C9;--azure-50:#EAF2FB;

/* --- Semantic aliases (use these in components) --- */
--text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--slate-500);--text-faint:var(--slate-400);
--text-invert:var(--white);--text-accent:var(--clay-600);--text-link:var(--clay-600);--text-link-hover:var(--clay-500);

--surface-page:var(--paper-50);--surface-card:var(--white);--surface-sunken:var(--paper-25);
--surface-inset:var(--slate-100);--surface-invert:var(--ink-900);
--surface-accent-soft:var(--signal-50);--surface-brand-soft:var(--clay-50);

--border-subtle:var(--slate-100);--border-default:var(--slate-200);--border-strong:var(--slate-300);
--border-accent:var(--signal-200);--border-brand:var(--clay-200);--border-invert:rgba(255,255,255,.14);

--action-primary:var(--ink-900);--action-primary-hover:var(--ink-800);--action-primary-active:var(--ink-950);
--action-accent:var(--clay-500);--action-accent-hover:var(--clay-600);--action-accent-active:var(--clay-700);
--action-quiet-hover:var(--paper-50);--focus-ring:rgba(164,34,42,.32);

--state-connected:var(--signal-500);--state-connecting:var(--amber-500);--state-off:var(--slate-300);--state-error:var(--rose-500);
}

/* ======================================================================
   Dark theme. Applied by [data-theme="dark"] and by system preference
   unless [data-theme="light"] is set explicitly.
   ====================================================================== */
:root[data-theme="dark"]{
--text-strong:#EEF1F5;--text-body:#C9D0D9;--text-muted:#8C97A5;--text-faint:#6C7683;
--text-invert:#0B0E13;--text-accent:#E08472;--text-link:#E08472;--text-link-hover:#EDA294;

--surface-page:#000000;--surface-card:#0D1116;--surface-sunken:#06080B;
--surface-inset:#171C24;--surface-invert:#EEF1F5;
--surface-accent-soft:#0E2A20;--surface-brand-soft:#2A1614;

--border-subtle:#1F252E;--border-default:#2A313B;--border-strong:#3A424E;
--border-accent:#1C5340;--border-brand:#5A2A26;--border-invert:rgba(0,0,0,.14);

--action-primary:#EEF1F5;--action-primary-hover:#DCE2EA;--action-primary-active:#FFFFFF;
--action-accent:#C4574F;--action-accent-hover:#D06A60;--action-accent-active:#B04A44;
--action-quiet-hover:#1A1F27;--focus-ring:rgba(224,132,114,.34);

--state-connected:#3FC189;--state-connecting:#D69B12;--state-off:#3A424E;--state-error:#E0736B;

--shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 2px 8px rgba(0,0,0,.45);
--shadow-3:0 8px 24px rgba(0,0,0,.5);--shadow-4:0 20px 48px rgba(0,0,0,.6);
--scrim:rgba(0,0,0,.6);
}
@media (prefers-color-scheme:dark){
:root:not([data-theme="light"]){
--text-strong:#EEF1F5;--text-body:#C9D0D9;--text-muted:#8C97A5;--text-faint:#6C7683;
--text-invert:#0B0E13;--text-accent:#E08472;--text-link:#E08472;--text-link-hover:#EDA294;

--surface-page:#000000;--surface-card:#0D1116;--surface-sunken:#06080B;
--surface-inset:#171C24;--surface-invert:#EEF1F5;
--surface-accent-soft:#0E2A20;--surface-brand-soft:#2A1614;

--border-subtle:#1F252E;--border-default:#2A313B;--border-strong:#3A424E;
--border-accent:#1C5340;--border-brand:#5A2A26;--border-invert:rgba(0,0,0,.14);

--action-primary:#EEF1F5;--action-primary-hover:#DCE2EA;--action-primary-active:#FFFFFF;
--action-accent:#C4574F;--action-accent-hover:#D06A60;--action-accent-active:#B04A44;
--action-quiet-hover:#1A1F27;--focus-ring:rgba(224,132,114,.34);

--state-connected:#3FC189;--state-connecting:#D69B12;--state-off:#3A424E;--state-error:#E0736B;

--shadow-1:0 1px 2px rgba(0,0,0,.4);--shadow-2:0 2px 8px rgba(0,0,0,.45);
--shadow-3:0 8px 24px rgba(0,0,0,.5);--shadow-4:0 20px 48px rgba(0,0,0,.6);
--scrim:rgba(0,0,0,.6);
}}

/* Explicit light choice must beat the system-dark media block above. */
:root[data-theme="light"]{
--text-strong:var(--ink-900);--text-body:var(--ink-700);--text-muted:var(--slate-500);--text-faint:var(--slate-400);
--text-invert:var(--white);--text-accent:var(--clay-600);--text-link:var(--clay-600);--text-link-hover:var(--clay-500);

--surface-page:var(--paper-50);--surface-card:var(--white);--surface-sunken:var(--paper-25);
--surface-inset:var(--slate-100);--surface-invert:var(--ink-900);
--surface-accent-soft:var(--signal-50);--surface-brand-soft:var(--clay-50);

--border-subtle:var(--slate-100);--border-default:var(--slate-200);--border-strong:var(--slate-300);
--border-accent:var(--signal-200);--border-brand:var(--clay-200);--border-invert:rgba(255,255,255,.14);

--action-primary:var(--ink-900);--action-primary-hover:var(--ink-800);--action-primary-active:var(--ink-950);
--action-accent:var(--clay-500);--action-accent-hover:var(--clay-600);--action-accent-active:var(--clay-700);
--action-quiet-hover:var(--paper-50);--focus-ring:rgba(164,34,42,.32);

--state-connected:var(--signal-500);--state-connecting:var(--amber-500);--state-off:var(--slate-300);--state-error:var(--rose-500);

--shadow-1:0 1px 2px rgba(16,20,26,.05);--shadow-2:0 2px 8px rgba(16,20,26,.06);
--shadow-3:0 8px 24px rgba(16,20,26,.08);--shadow-4:0 20px 48px rgba(16,20,26,.12);
--scrim:rgba(11,14,19,.44);
}