:root {
    /* colours */
    --color-primary: #000000;
    --color-primary-background-hover-color: #252525;
    --color-secondary: #7397A7;
    --color-secondary-background-hover-color: #fefefe;
    --color-tertiary: #e1003f;
    --color-tertiary-background-hover-color: #e3e5e6;
    --color-grey-100: #f8f8f8;
    --color-grey-200: #e3e5e6;
    --color-grey-300: #989da3;
    --color-grey-400: #3f4952;
    --color-success: #208636;
    --color-success-background-hover-color: #076d1d;
    --color-warning: #e7c000;
    --color-warning-background-hover-color: #e7c000;
    --color-information: #0066cc;
    --color-information-background-hover-color: #0066cc;
    --color-alert: #d40000;
    --color-black: #252525;
    --color-white: #fefefe;

    /* fonts */
    --font-headline-font-size: 26px;
    --font-headline-line-height: 32px;
    --font-body-large-font-size: 20px;
    --font-body-large-line-height: 28px;
    --font-body-font-size: 16px;
    --font-body-line-height: 24px;
    --font-body-small-font-size: 12px;
    --font-body-small-line-height: 20px;
    --font-small-print-font-size: 10px;
    --font-small-print-line-height: 16px;

    /* gutters */
    --gutter: 16px;

    /* elevation */
    --elevation-1: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16);
    --elevation-2: 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.16);
    --elevation-4: 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.16);
    --elevation-8: 0 0 8px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.16);
    --elevation-16: 0 0 16px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.16);

    /* shape */
    --shape-2: 2px;
    --shape-4: 4px;
    --shape-8: 8px;
    --shape-50: 50%;

    /* general links */
    --my-account-link-color: var(--color-black);
    --my-account-link-hover-color: var(--color-black);

    /* font family */
    --font-primary: "poppins";
    --font-stack: var(--font-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    
    --my-account-font-primary: "poppins",;
    --my-account-font-secondary: "poppins";
    --my-account-font-tertiary: "poppins";
}

[data-nbux-elevation="1"] {
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.16);
    box-shadow: var(--elevation-1);
}

[data-nbux-elevation="2"] {
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.16);
    box-shadow: var(--elevation-2);
}

[data-nbux-elevation="4"] {
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1), 0 4px 4px rgba(0, 0, 0, 0.16);
    box-shadow: var(--elevation-4);
}

[data-nbux-elevation="8"] {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.1), 0 8px 8px rgba(0, 0, 0, 0.16);
    box-shadow: var(--elevation-8);
}

[data-nbux-elevation="16"] {
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.1), 0 16px 16px rgba(0, 0, 0, 0.16);
    box-shadow: var(--elevation-16);
}

[data-nbux-radius] {
    overflow: hidden;
    box-sizing: border-box;
}

[data-nbux-radius="2"] {
    border-radius: 2px;
}

[data-nbux-radius="4"] {
    border-radius: 4px;
}

[data-nbux-radius="8"] {
    border-radius: 8px;
}

[data-nbux-radius="full"] {
    border-radius: 1000px;
}

[data-nbux-border="thin"] {
    border: 1px solid #e3e5e6;
    border: 1px solid var(--color-grey-200, #e3e5e6);
}

[data-nbux-border="thick"] {
    border: 2px solid #252525;
    border: 2px solid var(--color-grey-200, #e3e5e6);
}