@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

:root {
    --font-family-sans-serif: 'Rubik', sans-serif;

    --blue-infinity: #001c37;
    --blue-achievement: #1d77b9;
    --orange-ambition: #f15a22;
    --yellow-growth: #f99d1c;
    --off-white-future: #efe7df;
    --white-color: #ffffff;

    --primary-color: var(--blue-infinity);
    --primary-color-dark: #001122;
    --primary-color-focus: #1a2f4a;
    --secondary-color: var(--blue-achievement);
    --secondary-color-dark: #165a8d;

    --accent-color: var(--orange-ambition);
    --accent-color-dark: #c1481b;
    --accent-color-focus: #f48a5f;

    --danger-color: var(--accent-color);
    --danger-color-dark: var(--accent-color-dark);
    --danger-color-focus: var(--accent-color-focus);

    --text-color: var(--blue-infinity);
    --text-color-light: #99a7b5;
    --text-color-medium: #667b8f;
    --text-color-disabled: #ccd3d9;

    --background-color-light: var(--off-white-future);
    --background-color-light-2: #f2ebe5;
    --background-color-light-3: #f5f0ec;

    --warning-background-color: #fef2e2;
    --warning-text-color: var(--yellow-growth);

    --primary-gradient: linear-gradient(90deg, var(--blue-infinity), var(--blue-infinity));
}


/* 
:root {
    --primary-color: #4f46e5;
    --primary-color-dark: #4338ca;
    --primary-color-focus: #c7d2fe;
    --primary-color-lighter: #e9f0ff;
    --primary-color-lightest: #f0f4ff;
    --primary-color-for-nav: #0057ff;

    --secondary-color: #4A90E2;
    --secondary-color-dark: #0056b3;
    --secondary-color-for-nav: #007bff;

    --danger-color: red;
    --danger-color-dark: #ec1818;
    --danger-color-focus: #fec7c7;
    --danger-color-2: #e74c3c;
    --danger-color-2-dark: #c0392b;

    --white-color: #ffffff;
    --black-color: #000000;

    --text-color-light: #666;
    --text-color-medium: #444;
    --text-color-dark: #333;
    --text-color-darker: #222;
    --text-color-darkest: #2f3542;
    --text-color-disabled: #aaa;

    --grey-light-color: #e0e0e0;
    --grey-light-color-2: #ddd;
    --grey-lightest-color: #f0f0f0;
    --grey-medium-color: #ccc;

    --background-color-light: #f1f3f7;
    --background-color-light-2: #f9f9f9;
    --background-color-light-3: #f5f5f5;
    --background-color-alice-blue: aliceblue;

    --warning-background-color: #fffbe6;
    --warning-text-color: #8a6d3b;

    --primary-gradient: linear-gradient(90deg, #0057ff, #007bff);
} */