@import url("https://fonts.googleapis.com/css2?family=Fira+Sans&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Fira+Sans+Condensed&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Mulish&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");

:root {
    --color-primary: #ff4f2e;
    --color-primary-hover: #fa2700;
    --color-secondary: #228be6;
    --color-secondary-hover: #1971c2;
    --color-accent: #27406c;
    --color-background: #1b243d;
    --color-off-white: #fbfaf9;
    --color-dark-blue: #000414;
    --color-dark-grey: #2b2f43;
    --color-border: #364971;
    --color-input-disabled: #d9d9d9;
    --color-background-disabled: #494a4b;
    --color-warm-grey: #e5e1e3;

    --radius-small: 2px;
    --radius-medium: 4px;
    --radius-large: 8px;
    --radius-extra-large: 16px;

    --field-spacing: 0.5rem;
    --font-sans: sans-serif;

    --opacity-full: 1;
    --opacity-half: 0.5;
    --opacity-none: 0;
    --opacity-disabled: 0.6;

    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;

    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
}