:root, [data-theme="light"] {
  --surface: #fbfbfb;
  --surface-raised: #ffffff;
  --surface-tint: #f1f6fe;
  --surface-tint-strong: #e7f1fd;
  --surface-muted: #f4f6f8;
  --line: #e6e9ef;
  --line-strong: #cfd8e3;
  --line-tint: #deebfd;
  --ink: #222222;
  --ink-body: #444444;
  --ink-muted: #6b7484;
  --ink-subtle: #8a93a2;
  --brand-navy: #0d2c64;
  --brand-blue: #106eea;
  --brand-blue-hover: #0d58ba;
  --brand-cyan: #01aeef;
  --brand-green: #a7cd3a;
  --link-hover: #3b8af2;
  --on-brand: #ffffff;
  --focus: var(--brand-navy);
  --overlay: rgba(13, 44, 100, 0.55);
  --danger: #d93025;
  --danger-ink: #8c1d18;
  --danger-strong: #a5251d;
  --danger-soft: #fdecea;
  --danger-line: #f3b6b2;
  --warning: #b85c00;
  --warning-ink: #7a4100;
  --warning-soft: #fff3e0;
  --success: #28a745;
  --success-ink: #1c6b31;
  --success-soft: #e6f4ea;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --section: 60px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 50px;
  --shadow-card: 0 2px 16px rgba(16, 110, 234, 0.08);
  --shadow-card-hover: 0 2px 16px rgba(16, 110, 234, 0.15);
  --shadow-tile: 0 1px 4px rgba(0, 0, 0, 0.05);
  --shadow-button: 0 4px 8px rgba(0, 0, 0, 0.25);
  --shadow-button-hover: 0 8px 16px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 18px 50px rgba(0, 0, 0, 0.25);
  --gradient-brand: linear-gradient(to right, #0d2c64 0%, #01aeef 100%);
  --gradient-action: linear-gradient(to right, #0d2c64 0%, #106eea 100%);
  --font-body: "Open Sans", system-ui, sans-serif;
  --font-heading: Roboto, system-ui, sans-serif;
  --font-brand: Poppins, system-ui, sans-serif;
}
.display { font-family: var(--font-heading); font-size: 32px; line-height: 40px; font-weight: 700; }
.title { font-family: var(--font-heading); font-size: 24px; line-height: 32px; font-weight: 700; }
.heading { font-family: var(--font-heading); font-size: 20px; line-height: 28px; font-weight: 700; }
.subheading { font-family: var(--font-heading); font-size: 16px; line-height: 24px; font-weight: 700; }
.eyebrow { font-family: var(--font-heading); font-size: 13px; line-height: 20px; font-weight: 700; letter-spacing: 1px; }
.body { font-family: var(--font-body); font-size: 16px; line-height: 24px; font-weight: 400; }
.body-sm { font-family: var(--font-body); font-size: 14px; line-height: 22px; font-weight: 400; }
.caption { font-family: var(--font-body); font-size: 13px; line-height: 20px; font-weight: 400; }
.label { font-family: var(--font-body); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; }
.value-lg { font-family: var(--font-body); font-size: 28px; line-height: 34px; font-weight: 800; }
.value { font-family: var(--font-body); font-size: 20px; line-height: 28px; font-weight: 800; }
.value-sm { font-family: var(--font-body); font-size: 14px; line-height: 22px; font-weight: 600; }
.button { font-family: var(--font-heading); font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: 1px; }
.button-sm { font-family: var(--font-heading); font-size: 13px; line-height: 18px; font-weight: 500; letter-spacing: 1px; }
.tab { font-family: var(--font-brand); font-size: 14px; line-height: 20px; font-weight: 600; }