:root{
  /* Base palette */
  --jpmc-blue-200:#a6d7f0;   /* primary accent */
  --jpmc-blue-300:#8cc8e8;   /* primary hover */
  --jpmc-blue-400:#6fb6dc;   /* primary pressed */
  --jpmc-teal-600:#1a7b99;   /* deep teal accent */
  --jpmc-brown-600:#8f5a39;  /* secondary / warm emphasis */
  --jpmc-brown-700:#744629;
  --jpmc-black:#000000;
  --jpmc-white:#ffffff;
  --jpmc-gray-50:#f5f7f8;    /* surface */
  --jpmc-gray-100:#eceff1;
  --jpmc-gray-200:#e5e7eb;   /* card border */
  --jpmc-gray-400:#9aa1a7;
  --jpmc-gray-600:#5c6369;
  --jpmc-gray-800:#2b2f33;
  --jpmc-red-700:#b42318;    /* error */
  --jpmc-red-50:#fdf1f0;
  --jpmc-green-700:#1f6b3a;
  --jpmc-green-50:#eef7f1;

  /* Semantic */
  --color-primary:var(--jpmc-blue-200);
  --color-primary-hover:var(--jpmc-blue-300);
  --color-primary-pressed:var(--jpmc-blue-400);
  --color-accent-teal:var(--jpmc-teal-600);
  --color-secondary:var(--jpmc-brown-600);
  --color-secondary-hover:var(--jpmc-brown-700);
  --color-error:var(--jpmc-red-700);
  --color-error-surface:var(--jpmc-red-50);
  --color-success:var(--jpmc-green-700);
  --color-success-surface:var(--jpmc-green-50);

  --text-primary:var(--jpmc-black);
  --text-secondary:var(--jpmc-gray-600);
  --text-disabled:var(--jpmc-gray-400);
  --text-on-primary:var(--jpmc-black);
  --text-inverse:var(--jpmc-white);
  --text-accent:var(--jpmc-brown-600);
  --text-link:var(--jpmc-black);

  --surface-page:var(--jpmc-white);
  --surface-subtle:var(--jpmc-gray-50);
  --surface-card:var(--jpmc-gray-50);
  --surface-raised:var(--jpmc-white);
  --surface-inverse:var(--jpmc-black);
  --surface-hover:var(--jpmc-gray-100);

  --border-subtle:var(--jpmc-gray-200);
  --border-strong:var(--jpmc-black);
  --border-disabled:var(--jpmc-gray-400);
  --focus-ring:var(--jpmc-black);
  --scrim:rgba(0,0,0,.48);
}