:root{
/* ---- Base palette: Blue (primary) ---- */
--blue-50:#EEF3FF;--blue-100:#DBE5FF;--blue-200:#B8CBFF;--blue-300:#8AA9FF;--blue-400:#5680FF;
--blue-500:#2A5BF0;--blue-600:#1B45D0;--blue-700:#133399;--blue-800:#0E2670;--blue-900:#0A1B4D;--blue-950:#060F2E;
/* ---- Base palette: Yellow (accent) ---- */
--yellow-50:#FFF9E5;--yellow-100:#FFF0BF;--yellow-200:#FFE485;--yellow-300:#FFD645;
--yellow-400:#FFC61A;--yellow-500:#F2B300;--yellow-600:#C98F00;--yellow-700:#9A6C00;
/* ---- Base palette: Neutrals (cool white -> ink) ---- */
--white:#FFFFFF;
--grey-50:#F6F8FC;--grey-100:#EDF1F7;--grey-200:#DDE3ED;--grey-300:#C2CAD8;--grey-400:#8B95A7;
--grey-500:#5A6478;--grey-600:#3A4356;--grey-700:#232B3B;--grey-800:#161C28;--grey-900:#0B0F17;
/* ---- Semantic status ---- */
--green-500:#12A150;--green-50:#E7F7EE;
--red-500:#E23D3D;--red-50:#FDECEC;
--amber-500:#F2B300;--amber-50:#FFF6DC;

/* ---- Semantic aliases: brand ---- */
--brand-primary:var(--blue-500);
--brand-primary-hover:var(--blue-600);
--brand-primary-press:var(--blue-700);
--brand-deep:var(--blue-900);
--brand-accent:var(--yellow-400);
--brand-accent-hover:var(--yellow-500);
--brand-accent-press:var(--yellow-600);

/* ---- Semantic aliases: text ---- */
--text-strong:var(--grey-900);
--text-body:var(--grey-700);
--text-muted:var(--grey-500);
--text-subtle:var(--grey-400);
--text-inverse:var(--white);
--text-inverse-muted:#A9B8DE;
--text-link:var(--blue-500);
--text-link-hover:var(--blue-700);
--text-on-accent:var(--blue-950);

/* ---- Semantic aliases: surface ---- */
--surface-page:var(--white);
--surface-subtle:var(--grey-50);
--surface-sunken:var(--grey-100);
--surface-card:var(--white);
--surface-deep:var(--blue-900);
--surface-deep-raised:#0F2560;
--surface-accent:var(--yellow-400);
--surface-accent-subtle:var(--yellow-50);
--surface-primary-subtle:var(--blue-50);
--surface-overlay:rgba(6,15,46,.62);

/* ---- Semantic aliases: border ---- */
--border-subtle:var(--grey-200);
--border-default:var(--grey-300);
--border-strong:var(--grey-400);
--border-on-deep:rgba(255,255,255,.14);
--border-focus:var(--blue-400);

/* ---- Semantic aliases: status ---- */
--status-success-fg:var(--green-500);--status-success-bg:var(--green-50);
--status-danger-fg:var(--red-500);--status-danger-bg:var(--red-50);
--status-warning-fg:var(--yellow-700);--status-warning-bg:var(--amber-50);
--status-info-fg:var(--blue-600);--status-info-bg:var(--blue-50);

/* ---- Gradients (used sparingly: hero wash + photo protection) ---- */
--gradient-deep:linear-gradient(180deg,var(--blue-900) 0%,var(--blue-950) 100%);
--gradient-hero-scrim:linear-gradient(90deg,rgba(10,27,77,.96) 0%,rgba(10,27,77,.72) 46%,rgba(10,27,77,0) 78%); /* @kind color */
--gradient-photo-protect:linear-gradient(180deg,rgba(6,15,46,0) 40%,rgba(6,15,46,.85) 100%); /* @kind color */
--gradient-accent-band:linear-gradient(90deg,var(--yellow-400) 0%,var(--yellow-300) 100%);
}

/* Deep (navy) scope: apply to any section that flips to the dark blue surface. */
[data-theme="deep"]{
--surface-page:var(--blue-900);
--surface-subtle:var(--surface-deep-raised);
--surface-sunken:var(--blue-950);
--surface-card:var(--surface-deep-raised);
--text-strong:var(--white);
--text-body:#D7E1F7;
--text-muted:var(--text-inverse-muted);
--text-subtle:#7E90BC;
--text-link:var(--yellow-300);
--text-link-hover:var(--yellow-200);
--border-subtle:rgba(255,255,255,.10);
--border-default:rgba(255,255,255,.18);
--border-strong:rgba(255,255,255,.30);
}