:root{
/* Brand palette, per the client's Logo Breakdown sheet: navy, the cyan-to-blue gradient, white. Nothing else is a brand colour. */
--navy-900:#0C3051;--cyan-500:#51C6DB;--blue-500:#3D9ED6;--white:#FFFFFF;
--brand-gradient:linear-gradient(135deg,#51C6DB 0%,#3D9ED6 100%); /* @kind color */
--brand-gradient-h:linear-gradient(90deg,#51C6DB 0%,#3D9ED6 100%); /* @kind color */
/* Functional tints and shades derived from the three brand colours (UI states only) */
--navy-950:#061A2E;--navy-800:#123E66;--navy-700:#1A4F80;
--blue-300:#8CC6EA;--blue-100:#DCEEF9;--blue-50:#EEF7FC;--cyan-300:#9BDDEA;--cyan-100:#DDF4F8;
/* Neutrals, navy-tinted */
--mist-50:#F5F8FB;--mist-100:#ECF1F6;--mist-200:#DCE4EC;--mist-300:#C3CFDB;--slate-500:#5D6F82;--slate-600:#475869;--slate-700:#33424F;--ink-900:#0E1B26;
/* Semantic (form states and ratings only) */
--green-600:#1F7A4D;--green-50:#E8F5EE;--amber-600:#A15C00;--amber-50:#FDF3E3;--red-600:#B3261E;--red-50:#FCEBEA;--star:#F4B400;
/* Aliases */
--surface-page:var(--white);--surface-subtle:var(--mist-50);--surface-muted:var(--mist-100);--surface-inverse:var(--navy-900);--surface-inverse-deep:var(--navy-950);--surface-card:var(--white);
--text-strong:var(--navy-900);--text-body:var(--slate-700);--text-muted:var(--slate-600);--text-inverse:var(--white);--text-inverse-muted:#B9CBDD;--text-link:var(--navy-900);--text-link-hover:var(--navy-700);
--border-subtle:var(--mist-200);--border-strong:var(--mist-300);--border-inverse:rgba(255,255,255,.18);
/* Primary action = the logo gradient with navy text (4.6:1 at the darkest end). Hover flips to navy with white text. */
--action-primary:var(--brand-gradient);--action-primary-hover:var(--navy-900);--action-primary-press:var(--navy-950);--action-on-primary:var(--navy-900);--action-on-primary-hover:var(--white);
/* On navy: the same gradient; hover goes white */
--action-inverse:var(--brand-gradient);--action-inverse-hover:var(--white);--action-inverse-press:var(--cyan-100);--action-on-inverse:var(--navy-900);
--focus-ring:var(--cyan-500);
--state-success:var(--green-600);--state-success-bg:var(--green-50);--state-warning:var(--amber-600);--state-warning-bg:var(--amber-50);--state-error:var(--red-600);--state-error-bg:var(--red-50);
}