:root{
/* Brand blue ramp */
--blue-900:#001f66;
--blue-800:#00248a;
--blue-700:#0032b8;
--blue-600:#003dc9;
--blue-500:#1550e0;
--blue-400:#4d7bf0;
--blue-200:#b9c8f7;
--blue-100:#e6ebfc;
--blue-50:#f2f5fe;
/* Accent periwinkle (icon glyphs, secondary accents) */
--periwinkle-600:#5865c4;
--periwinkle-500:#6f7dd6;
--periwinkle-200:#d7ddf6;
--periwinkle-100:#e8eafb;
/* Deep navy — solid-fill "premium" surfaces (mobile Premium Max card) */
--navy-900:#001452;
--navy-800:#0a1f66;
/* Ink (text) neutrals */
--ink-900:#0f1115;
--ink-800:#1c1e22;
--ink-700:#4b4f58;
--ink-500:#74787f;
--ink-300:#a6a9af;
--ink-100:#e2e2e2;
/* Surfaces */
--surface-0:#ffffff;
--surface-1:#f9f9f9;
--surface-2:#f3f3f3;
--surface-inverse:#0f1115;
/* Borders */
--border-subtle:#e7e8f2;
--border-strong:#e2e2e2;
--border-brand:#003dc9;
/* Semantic aliases */
--text-heading:var(--ink-900);
--text-body:var(--ink-700);
--text-muted:var(--ink-500);
--text-label-brand:var(--blue-600);
--text-on-brand:#ffffff;
--surface-page:var(--surface-0);
--surface-section:var(--surface-1);
--surface-card:var(--surface-0);
--surface-card-alt:var(--surface-2);
--surface-brand:var(--blue-600);
--action-primary-bg:var(--blue-600);
--action-primary-bg-hover:var(--blue-500);
--action-primary-bg-active:var(--blue-800);
--action-secondary-border:var(--ink-100);
--action-secondary-bg-hover:var(--surface-2);
--focus-ring:var(--blue-400);
--surface-premium-solid:var(--navy-900);
--surface-premium-gradient:linear-gradient(135deg,#0038c8 0%,#0050f4 100%);
--text-on-premium:#ffffff;
--text-on-premium-muted:var(--periwinkle-200);
}