:root,
body.light, body.dark {
    --primary: #216487;
    --on-primary: #FFFFFF;
    --primary-container: #ffd453;
    --on-primary-container: #001E2E;
    --secondary: #735C0C;
    --on-secondary: #FFFFFF;
    --secondary-container: #FFE08C;
    --on-secondary-container: #241A00;
    --tertiary: #62597C;
    --on-tertiary: #FFFFFF;
    --tertiary-container: #E8DDFF;
    --on-tertiary-container: #1E1635;
    --error: #BA1A1A;
    --on-error: #FFFFFF;
    --error-container: #FFDAD6;
    --on-error-container: #410002;
    --background: #F6FAFE;
    --on-background: #181C20;
    --surface: white;
    --on-surface: #181C20;
    --surface-variant: #DDE3EA;
    --on-surface-variant: #41484D;
    --outline: #71787E;
    --outline-variant: #C1C7CE;
    --shadow: #000000;
    --scrim: #000000;
    --inverse-surface: #2D3135;
    --inverse-on-surface: #EEF1F6;
    --inverse-primary: #92CEF5;
    --surface-dim: #D7DADF;
    --surface-bright: #F6FAFE;
    --surface-container-lowest: #FFFFFF;
    --surface-container-low: #F0F4F9;
    --surface-container: #EBEEF3;
    --surface-container-high: #E5E8ED;
    --surface-container-highest: #DFE3E7;
    --overlay: rgb(0 0 0 / 0.5);
    --active: rgb(0 0 0 / 0.1);
    --elevate1: 0 0.125rem 0.125rem 0 rgb(0 0 0 / 0.32);
    --elevate2: 0 0.25rem 0.5rem 0 rgb(0 0 0 / 0.4);
    --elevate3: 0 0.375rem 0.75rem 0 rgb(0 0 0 / 0.48);
}