:root{
/* --- brand base --- */
--blue-900:#1b3245;
--blue-800:#1f4160;
--blue-700:#336699;
--blue-600:#005fa6;
--blue-500:#2878b3;
--blue-400:#5a9bc9;
--blue-300:#86bbd8;
--blue-200:#b7d7e9;
--blue-100:#e2f0f7;

--green-700:#4a9e50;
--green-600:#6ec96e;
--green-500:#9ee493;
--green-400:#bdedb2;
--green-300:#daf7dc;
--green-200:#ecfbed;

--ink-900:#1c2b34;
--ink-800:#2f4858;
--ink-700:#3e5c6e;
--ink-600:#547284;
--ink-500:#7691a0;
--ink-400:#9dafba;
--ink-300:#c3d0d6;
--ink-200:#dee6ea;
--ink-100:#eef2f4;
--ink-0:#ffffff;

--amber-600:#b3791d;
--amber-500:#d99a2b;
--amber-100:#faf0dd;
--red-600:#b23b3b;
--red-500:#d15353;
--red-100:#f9e3e3;

/* --- semantic: brand --- */
--color-primary:var(--blue-600);
--color-primary-hover:var(--blue-800);
--color-primary-active:var(--blue-900);
--color-primary-tint:var(--blue-100);
--color-accent:var(--green-500);
--color-accent-hover:var(--green-700);
--color-accent-tint:var(--green-300);

/* --- semantic: surfaces & text --- */
--color-bg:var(--ink-0);
--color-bg-subtle:var(--ink-100);
--color-surface:var(--ink-0);
--color-surface-sunken:#f4f7f8;
--color-surface-dark:var(--ink-800);
--color-border:var(--ink-200);
--color-border-strong:var(--ink-300);
--color-text:var(--ink-900);
--color-text-muted:var(--ink-600);
--color-text-faint:var(--ink-500);
--color-text-on-dark:var(--ink-0);
--color-text-on-primary:var(--ink-0);

/* --- semantic: feedback --- */
--color-success:var(--green-700);
--color-success-tint:var(--green-200);
--color-warning:var(--amber-600);
--color-warning-tint:var(--amber-100);
--color-danger:var(--red-600);
--color-danger-tint:var(--red-100);
--color-info:var(--blue-600);
--color-info-tint:var(--blue-100);

--focus-ring:var(--blue-400);
}

/* Dark-mode override for the sub-brand tokens above. The site-wide
   light/dark toggle (header.php #theme-toggle, script.js) sets
   data-theme on <html> and already covers the main site's own --c-*
   tokens; without this block these --color-* tokens ignored it and the
   product page stayed permanently light. Hero/CTA sections already use
   a hardcoded ink-900 background regardless of theme, so bg here reuses
   the same tone and the two blend instead of clashing. --color-primary*
   is intentionally left unchanged (same as the main site's --c-accent):
   it is only ever read as text/icon color on a pale tint chip (e.g. the
   comparison-table checkmarks, step-icon circles) or as white-on-fill
   button backgrounds, both of which already have enough contrast in
   either theme. */
html[data-theme="dark"]{
--color-bg:var(--ink-900);
--color-bg-subtle:var(--ink-800);
--color-surface:var(--ink-700);
--color-surface-sunken:var(--ink-800);
--color-border:var(--ink-600);
--color-border-strong:var(--ink-500);
--color-text:var(--ink-100);
--color-text-muted:var(--ink-400);
--color-text-faint:var(--ink-500);
}