:root{
/* --- base ramp: blue (primary / accent #1764FF) --- */
--color-blue-50:#EDF3FF;
--color-blue-100:#D6E3FF;
--color-blue-300:#7FA8FF;
--color-blue-500:#1764FF;
--color-blue-600:#0F50D6;
--color-blue-700:#0B3EA8;

/* --- secondary: deep navy #001133 --- */
--color-navy-900:#001133;
--color-navy-800:#0A1D45;
--color-navy-700:#16295A;

/* --- link tint #DEE2ED --- */
--color-link:#DEE2ED;

/* --- base ramp: cool neutrals --- */
--color-black:#16181D;
--color-charcoal-900:#1C1F26;
--color-charcoal-800:#242832;
--color-charcoal-700:#2F3440;
--color-gray-700:#4A5060;
--color-gray-500:#838A9A;
--color-gray-300:#D3D8E3;
--color-gray-100:#EEF0F5;
--color-cream:#F7F8FB;
--color-white:#FFFFFF;

/* --- status --- */
--color-red-500:#D92D20;
--color-red-tint:#FDECEA;
--color-violet-500:#6A4BD6;
--color-violet-300:#A994F5;
--color-violet-tint:#F0ECFC;
--color-green-500:#2E7D4F;
--color-green-tint:#E8F2EC;
--color-amber-500:#B7791F;
--color-amber-tint:#FBF2E0;

/* --- semantic: light (default) --- */
--bg-page:var(--color-white);
--bg-subtle:var(--color-cream);
--bg-surface:var(--color-white);
--bg-surface-alt:var(--color-gray-100);
--bg-inverse:var(--color-navy-900);

--text-primary:var(--color-black);
--text-secondary:var(--color-gray-700);
--text-muted:var(--color-gray-500);
--text-inverse:var(--color-white);
--text-accent:var(--color-blue-600);

--border-default:var(--color-gray-300);
--border-strong:var(--color-gray-500);
--border-subtle:var(--color-gray-100);

--primary:var(--color-blue-500);
--secondary:var(--color-navy-900);
--secondary-hover:var(--color-navy-800);
--link:var(--color-link);

--accent:var(--color-blue-500);
--accent-hover:var(--color-blue-600);
--accent-active:var(--color-blue-700);
--accent-tint:var(--color-blue-50);
--accent-contrast:var(--color-white);
--focus-ring:var(--color-blue-500);

--status-ok:var(--color-green-500);
--status-ok-tint:var(--color-green-tint);
--status-warn:var(--color-amber-500);
--status-warn-tint:var(--color-amber-tint);
--status-danger:var(--color-red-500);
--status-danger-tint:var(--color-red-tint);
--status-info:var(--color-violet-500);
--status-info-tint:var(--color-violet-tint);
}

/* Темная тема – нейтральная, почти черная, без синевы в фоне (по просьбе пользователя,
   2026-10-04). Синий остается только акцентом. Темно-синие --color-navy-* больше не
   используются в темной теме. */
[data-theme="dark"]{
--color-ink-950:#0A0A0A;
--color-ink-900:#121212;
--color-ink-850:#161616;
--color-ink-800:#1F1F1F;
--color-ink-700:#2A2A2A;
--color-ink-500:#8C8C8C;
--color-ink-300:#C8C8C8;

--bg-page:var(--color-ink-950);
--bg-subtle:var(--color-ink-900);
--bg-surface:var(--color-ink-850);
--bg-surface-alt:var(--color-ink-800);
--bg-inverse:var(--color-white);

--text-primary:var(--color-white);
--text-secondary:var(--color-ink-300);
--text-muted:var(--color-ink-500);
--text-inverse:var(--color-black);
--text-accent:var(--color-blue-300);

--border-default:var(--color-ink-700);
--border-strong:#4A4A4A;
--border-subtle:var(--color-ink-800);

--secondary:var(--color-white);
--secondary-hover:var(--color-ink-300);
--link:rgba(255,255,255,.3);

--accent:var(--color-blue-500);
--accent-hover:var(--color-blue-300);
--accent-active:var(--color-blue-600);
--accent-tint:rgba(23,100,255,.16);
--accent-contrast:var(--color-white);

--status-ok:#5FBF89;
--status-ok-tint:rgba(95,191,137,.12);
--status-warn:#E0AC4E;
--status-warn-tint:rgba(224,172,78,.12);
--status-danger:#F0604F;
--status-danger-tint:rgba(240,96,79,.14);
--status-info:var(--color-violet-300);
--status-info-tint:rgba(169,148,245,.14);
}