:root {
  color-scheme: light;

  --vgn-on-primary-fixed-variant: #3f465c;
  --vgn-outline-variant: #c6c6cd;
  --vgn-primary-container: #131b2e;
  --vgn-surface-dim: #cbdbf5;
  --vgn-on-tertiary: #ffffff;
  --vgn-surface-container-high: #dce9ff;
  --vgn-inverse-primary: #bec6e0;
  --vgn-on-error-container: #93000a;
  --vgn-tertiary-fixed: #d5e3fd;
  --vgn-background: #f8f9ff;
  --vgn-inverse-surface: #213145;
  --vgn-on-secondary: #ffffff;
  --vgn-surface: #f8f9ff;
  --vgn-surface-container-lowest: #ffffff;
  --vgn-secondary-container: #fd761a;
  --vgn-on-surface-variant: #45464d;
  --vgn-on-background: #0b1c30;
  --vgn-outline: #76777d;
  --vgn-surface-variant: #d3e4fe;
  --vgn-on-secondary-fixed-variant: #783200;
  --vgn-on-tertiary-container: #76859b;
  --vgn-secondary: #9d4300;
  --vgn-on-error: #ffffff;
  --vgn-surface-bright: #f8f9ff;
  --vgn-primary: #000000;
  --vgn-tertiary: #000000;
  --vgn-on-secondary-fixed: #341100;
  --vgn-surface-container: #e5eeff;
  --vgn-error-container: #ffdad6;
  --vgn-primary-fixed-dim: #bec6e0;
  --vgn-on-surface: #0b1c30;
  --vgn-tertiary-fixed-dim: #b9c7e0;
  --vgn-surface-container-low: #eff4ff;
  --vgn-on-primary-fixed: #131b2e;
  --vgn-secondary-fixed-dim: #ffb690;
  --vgn-secondary-fixed: #ffdbca;
  --vgn-surface-tint: #565e74;
  --vgn-on-secondary-container: #5c2400;
  --vgn-surface-container-highest: #d3e4fe;
  --vgn-tertiary-container: #0d1c2f;
  --vgn-error: #ba1a1a;
  --vgn-on-tertiary-fixed: #0d1c2f;
  --vgn-on-primary-container: #7c839b;
  --vgn-on-tertiary-fixed-variant: #3a485c;
  --vgn-on-primary: #ffffff;
  --vgn-primary-fixed: #dae2fd;
  --vgn-inverse-on-surface: #eaf1ff;

  --vgn-radius-sm: 0.125rem;
  --vgn-radius-md: 0.25rem;
  --vgn-radius-lg: 0.5rem;
  --vgn-radius-xl: 0.75rem;
  --vgn-unit: 4px;
  --vgn-container-max: 1440px;
  --vgn-margin: 32px;
  --vgn-gutter: 24px;

  --vgn-font-display: Manrope, Inter, system-ui, sans-serif;
  --vgn-font-body: Inter, system-ui, sans-serif;
  --vgn-display-lg: 700 48px/1.2 var(--vgn-font-display);
  --vgn-headline-md: 600 24px/1.4 var(--vgn-font-display);
  --vgn-body-base: 400 16px/1.6 var(--vgn-font-body);
  --vgn-body-sm: 400 14px/1.5 var(--vgn-font-body);
  --vgn-data-mono: 500 13px/1 var(--vgn-font-body);
  --vgn-label-uppercase: 600 12px/1 var(--vgn-font-body);

  --vgn-shadow-card: 0 2px 10px rgba(0, 0, 0, 0.02);
  --vgn-shadow-panel: 0 4px 24px rgba(0, 0, 0, 0.04);
  --vgn-shadow-drawer: -20px 0 40px rgba(11, 28, 48, 0.12);
}