:root {
    --color-brand-primary: #00103e;
    --color-brand-primary-hover: #001f66;
    --color-brand-primary-subtle: #61728f;
    --color-brand-primary-container: #e6ecf8;
    --color-on-primary: #ffffff;
    --color-on-primary-container: #00103e;

    --color-inverse-primary: #d0e1fb;
    --color-on-inverse-primary: #00103e;

    --color-brand-secondary: #505f76;
    --color-brand-secondary-hover: #38485d;
    --color-brand-secondary-container: #d0e1fb;
    --color-on-secondary: #ffffff;

    --color-bg-light: #fbf8fa;
    --color-bg-dark: #303032;

    --color-text-main: #1b1b1d;
    --color-text-muted: #45474c;
    --color-text-disabled: #75777d;
    --color-text-white: #ffffff;
    --color-text-light: #f3f0f2;


    --color-border-light: #c5c6cd;
    --color-border-gray: #c5c6cd;
    --color-border-dark: #75777d;

    --color-success: #2e7d32;
    --color-success-container: #e8f5e9;
    --color-on-success-container: #1b5e20;
    --color-on-success: #ffffff;

    --color-info: #4059aa;
    --color-info-container: #e8eaf6;
    --color-on-info-container: #1a237e;
    --color-on-info: #ffffff;

    --color-error: #ba1a1a;
    --color-error-container: #fef2f2;
    --color-on-error-container: #7f1d1d;
    --color-on-error: #ffffff;

    --gutter-x: 5rem;
    --gutter-y: 1rem;
}