:root{
/* --- Green: primary brand + accent (the turtle) --- */
--green-50:#E9F8EF;--green-100:#C9EED8;--green-200:#93DEB4;--green-300:#5CCC90;
--green-400:#3ABC74;--green-500:#26AE5F;--green-600:#1E8C4C;--green-700:#17693A;
--green-800:#0F4626;--green-900:#082313;
/* --- Blue: support --- */
--blue-50:#E6EFFA;--blue-100:#C2D8F3;--blue-200:#85B0E6;--blue-300:#4787D6;
--blue-400:#1665C4;--blue-500:#004EB5;--blue-600:#003F93;--blue-700:#003072;
--blue-800:#002050;--blue-900:#0A0A4F;
/* --- Sky: light-blue detail gradient (never a primary surface) --- */
--sky-100:#D5F4FF;--sky-200:#A8E8FF;--sky-300:#7ED9F7;
/* --- Neutrals --- */
--neutral-0:#FFFFFF;--neutral-25:#FAFBFC;--neutral-50:#F4F7F8;--neutral-100:#EAEEF0;
--neutral-200:#DCE2E6;--neutral-300:#C2CBD1;--neutral-400:#98A3AA;--neutral-500:#6F7A81;
--neutral-600:#525C62;--neutral-700:#3A4247;--neutral-800:#23292D;--neutral-900:#14181A;
/* --- Semantic status --- */
--status-success:var(--green-500);--status-success-bg:var(--green-50);
--status-info:var(--blue-500);--status-info-bg:var(--blue-50);
--status-warning:#E8A317;--status-warning-bg:#FDF3DE;
--status-danger:#D24B3E;--status-danger-bg:#FCEBE9;

/* ================= Semantic aliases (use these) ================= */
--text-strong:var(--blue-900);
--text-body:var(--neutral-700);
--text-muted:var(--neutral-500);
--text-inverse:var(--neutral-0);
--text-accent:var(--green-600);
--text-link:var(--blue-500);
--text-link-hover:var(--blue-600);

--surface-page:var(--neutral-0);
--surface-subtle:var(--neutral-50);
--surface-card:var(--neutral-0);
--surface-accent:var(--green-500);
--surface-accent-soft:var(--green-50);
--surface-support:var(--blue-500);
--surface-support-soft:var(--blue-50);
--surface-deep:var(--blue-900);
--surface-overlay:rgba(10,10,79,.55);

--border-subtle:var(--neutral-100);
--border-default:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-accent:var(--green-500);

--action-primary:var(--green-500);
--action-primary-hover:var(--green-600);
--action-primary-press:var(--green-700);
--action-secondary:var(--blue-500);
--action-secondary-hover:var(--blue-600);
--action-disabled:var(--neutral-200);
--focus-ring:var(--blue-500);

/* Detail gradient — badges, section washes, illustration backdrops only */
--gradient-sky:linear-gradient(135deg,var(--sky-200) 0%,var(--sky-100) 100%);
--gradient-sky-soft:linear-gradient(180deg,var(--sky-100) 0%,var(--neutral-0) 100%);
}