:root {
    /* Primary */
    --color-primary: #11324b;
    --color-primary-1: #cfd6db;
    --color-primary-2: #b0bbc3;
    --color-primary-3: #8898a5;
    --color-primary-4: #607687;
    --color-primary-5: #395469;
    --color-primary-6: #0e2a3e;
    --color-primary-7: #0b2132;
    --color-primary-8: #081926;
    --color-primary-9: #061119;
    --color-primary-10: #030f0a;

    /* Secondary */
    --color-secondary: #bedaf2;
    --color-secondary-1: #f2f8fc;
    --color-secondary-2: #e9f3fb;
    --color-secondary-3: #deecf8;
    --color-secondary-4: #d4e6f6;
    --color-secondary-5: #c9e0f4;
    --color-secondary-6: #9eb6ca;
    --color-secondary-7: #7f91a1;
    --color-secondary-8: #5f6d79;
    --color-secondary-9: #3f4951;
    --color-secondary-10: #262c30;

    /* Teritary */
    --color-teritary: #e45858;
    --color-teritary-1: #fadede;
    --color-teritary-2: #f6c7c7;
    --color-teritary-3: #f2acac;
    --color-teritary-4: #ed9090;
    --color-teritary-5: #e87474;
    --color-teritary-6: #be4949;
    --color-teritary-7: #983b3b;
    --color-teritary-8: #722c2c;
    --color-teritary-9: #4c1d1d;
    --color-teritary-10: #2e1212;

    /* Greys */
    --color-grey: #3c4856;
    --color-grey-1: #d8dadd;
    --color-grey-2: #bec2c7;
    --color-grey-3: #9ea4aa;
    --color-grey-4: #7d858e;
    --color-grey-5: #5c6672;
    --color-grey-6: #323c48;
    --color-grey-7: #283039;
    --color-grey-8: #1e242b;
    --color-grey-9: #14181d;
    --color-grey-10: #0c0e11;

    /* Neutral */
    --color-neutral-black: #0c0e11;
    --color-neutral-white: #f5f6f8;

    /* Text */
    --color-text-black: #0c0e11;
    --color-text-white: #f5f6f8;

    /* Background */
    --color-bg: #11324b;
    --color-bg-dashboard: #cfd6db;
    --color-bg-card: #f5f6f8;
    --color-bg-interactable: #395469;

    /* Border */
    --color-border: #9ea4aa;
    --color-border-btn: #11324b;

    /* States */
    --color-state: #b42318;
    --color-state-hover: #f04438;

    /* Space */
    --space-4: 4px;
    --space-8: 8px;
    --space-16: 16px;
    --space-24: 24px;
    --space-32: 32px;
    --space-48: 48px;
    --space-64: 64px;
    --space-80: 80px;
    --space-120: 120px;

    /* Box Shadow */
    --box-shadow:
        0px 4px 8px -2px rgba(10, 13, 18, 0.1),
        0px 2px 4px -2px rgba(10, 13, 18, 0.06);
}

html {
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    font-family: inherit;
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-black);
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    top: 0 !important;
}

button,
input,
/* often good to include text inputs */
select,
textarea {
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

p,
ul,
ol,
blockquote,
figure {
    overflow-wrap: break-word;
}

h1 {
    color: var(--color-text-black);
    font-weight: 600;
    font-size: 36px;
    line-height: 44px;
    letter-spacing: -0.72px;
}

h2 {
    color: var(--color-text-black);
    font-weight: 600;
    font-size: 30px;
    line-height: 38px;
}

error-message {
    color: var(--color-state) !important;
}

[btn-primary] {
    padding: var(--space-8) var(--space-16);
    color: var(--color-text-white);
    border-radius: var(--space-8);
    background-color: var(--color-primary-5);
    border-radius: var(--space-8);
    border: 1px solid var(--color-primary-5);
    width: 100%;
}

[btn-primary] font {
    color: var(--color-text-white);
}

[btn-primary]:hover {
    background-color: var(--color-primary-3);
    border: 1px solid var(--color-primary-3);
}

[btn-primary]:disabled {
    background-color: var(--color-grey-2);
    border: 1px solid var(--color-grey-2);
}

[btn-secondary] {
    padding: var(--space-8) var(--space-16);
    color: var(--color-grey-8);
    border-radius: var(--space-8);
    background-color: var(--color-neutral-white);
    border-radius: var(--space-8);
    border: 1px solid var(--color-grey-3);
    width: 100%;
}

[btn-secondary] font {
    color: var(--color-grey-8);
}

[btn-secondary]:hover {
    background-color: var(--color-primary);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary);
}

[btn-secondary]:disabled {
    background-color: var(--color-primary-1);
    color: var(--color-text-white);
    border: 1px solid var(--color-primary-1);
}

btn-text {
    color: var(--color-grey-10);
}

btn-text:hover {
    color: var(--color-grey-6);
}

btn-text:disabled {
    color: var(--color-grey-2);
}

input {
    background-color: var(--color-neutral-white);
    border: 1px solid var(--color-grey-3);
    color: var(--color-grey-5);
    border-radius: var(--space-8);
    outline: unset;
    padding: var(--space-4);
}

input[state-error] {
    border: 1px solid var(--color-state);
}

dialog {
    padding: var(--space-24);
    background-color: var(--color-neutral-white);
    border-radius: var(--space-8);
}

a {
    text-decoration: none;
}