:root{
    --color-brand-50: #ebf5fe;
    --color-brand-100: #d0e8fd;
    --color-brand-200: #99d3fc;
    --color-brand-300: #45befa;
    --color-brand-400: #2ca8e1;
    --color-brand-500: #248fc0;
    --color-brand-600: #1c77a0;
    --color-brand-700: #156082;
    --color-brand-800: #0b4058;
    --color-brand-900: #042434;
    --color-brand-950: #021520;

    --color-neutral-50: #f5f6f8;
    --color-neutral-100: #edeff1;
    --color-neutral-200: #ccd2d8;
    --color-neutral-300: #aab5be;
    --color-neutral-400: #909aa3;
    --color-neutral-500: #757d85;
    --color-neutral-600: #5d646a;
    --color-neutral-700: #454a4e;
    --color-neutral-800: #2f3337;
    --color-neutral-900: #191c1e;
    --color-neutral-950: #0f1113;

    --color-text-50: #eff5f6;
    --color-text-100: #deeaee;
    --color-text-200: #c0d8df;
    --color-text-300: #a1bac1;
    --color-text-400: #899fa5;
    --color-text-500: #708287;
    --color-text-600: #57666a;
    --color-text-700: #424d51;
    --color-text-800: #2c3436;
    --color-text-900: #191e20;
    --color-text-950: #0e1213;

    --color-secondary-50: #b7fef6;
    --color-secondary-100: #54fdef;
    --color-secondary-200: #3ce2d5;
    --color-secondary-300: #33c6ba;
    --color-secondary-400: #29a79c;
    --color-secondary-500: #218a82;
    --color-secondary-600: #186f68;
    --color-secondary-700: #0f524c;
    --color-secondary-800: #083935;
    --color-secondary-900: #03201d;
    --color-secondary-950: #011412;

    --color-green-50: #d1fcd2;
    --color-green-100: #a3f9a6;
    --color-green-200: #66e66b;
    --color-green-300: #59ca5d;
    --color-green-400: #4caf50;
    --color-green-500: #3d8f40;
    --color-green-600: #307332;
    --color-green-700: #225624;
    --color-green-800: #143a16;
    --color-green-900: #09230a;
    --color-green-950: #041404;

    --color-red-50: #fdf1f0;
    --color-red-100: #fcdfde;
    --color-red-200: #f9bdbc;
    --color-red-300: #f79a97;
    --color-red-400: #f5736e;
    --color-red-500: #f44336;
    --color-red-600: #c32f23;
    --color-red-700: #942218;
    --color-red-800: #68150e;
    --color-red-900: #3f0905;
    --color-red-950: #2d0503;

    --color-amber-50: #ffeed9;
    --color-amber-100: #ffe1b7;
    --color-amber-200: #ffc107;
    --color-amber-300: #dba500;
    --color-amber-400: #ba8c00;
    --color-amber-500: #9a7300;
    --color-amber-600: #7c5c00;
    --color-amber-700: #5e4500;
    --color-amber-800: #3f2e00;
    --color-amber-900: #261a00;
    --color-amber-950: #180f00;

    --color-primary: var(--color-brand-400);
    --color-primary-hover: var(--color-brand-600);
    --color-on-primary: var(--color-brand-100);

    --color-secondary: var(--color-secondary-500);
    --color-secondary-hover: var(--color-secondary-300);

    --color-bg: var(--color-neutral-100);
    --color-surface: var(--color-neutral-50);
    --color-border: var(--color-neutral-400);
    --color-shadow: var(--color-neutral-500);

    --color-text: var(--color-text-900);
    --color-text-muted: var(--color-text-700);

    --color-error: var(--color-red-500);
    --color-warning: var(--color-amber-400);
    --color-success: var(--color-green-500);


    --font-logo: 'Poppins', system-ui, -apple-system,  sans-serif;
    --font-heading: 'Montserrat', system-ui, -apple-system, sans-serif;
    --font-body: 'Roboto', system-ui, -apple-system, sans-serif;
    --font-ui: 'Source Sans Pro', system-ui, -apple-system, sans-serif;
    --font-ui-2: 'Outfit', system-ui, -apple-system, sans-serif;

    --text-size-xs: 0.56rem;
    --text-size-sm: 0.75rem;
    --text-size-md: 1rem;
    --text-size-lg: 1.33rem;
    --text-size-xl: 1.78rem;
    --text-size-2xl: 2.37rem;
    --text-size-3xl: 3.16rem;
    --text-size-4xl: 4.21rem;
    --text-size-5xl: 5.61rem;

    --navigation-height: 60px;
    --footer-height: 275px;
}

*  {
    box-sizing: border-box;
}


html{
    font-size: 16px;
    padding: 0;
    margin: 0;
    color: var(--color-text);
}

h1,h2,h3{
    font-family: var(--font-heading);
}

body{
    min-height: 100vh;
    background-color: var(--color-bg);
    font-family: var(--font-body);
    line-height: 1.5;
    padding: 0;
    margin: 0;

}

main {
    min-height: calc(100vh - var(--navigation-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}