:root{
  /* Colors — Patriotic */
  --navy:#0B2749;
  --red:#C1121F;
  --white:#FFFFFF;
  --ink:#0B0F14;
  --surface:#FFFFFF;
  --surface-alt:#F3F5F8;
  --border:#E2E8F0;
  --success:#1B5E20;

  /* Type scale */
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-lg:18px;
  --text-xl:20px; --text-2xl:24px; --text-3xl:30px; --text-4xl:36px;

  /* Spacing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-7:32px; --space-8:40px;

  /* Radii & shadows */
  --radius-card:16px; --radius-btn:12px;
  --shadow-1:0 6px 18px rgba(12, 21, 33, .08);
  --shadow-2:0 10px 24px rgba(12, 21, 33, .12);

  /* Layout */
  --max-w:1200px;
  
  /* Button-specific shades derived from your palette */
  --navy-dark: #071b32;       /* deeper than --navy */
  --red-dark:  #8f0d17;       /* deeper than --red  */
  --slate-500: #64748b;       /* neutral for reset/download */
  --slate-600: #475569;

  /* Focus ring */
  --ring-blue: 0 0 0 3px rgba(11, 39, 73, .25); /* based on --navy */  
  
}