@import 'index.css';

:root {
    /* Content */
    --content-primary: #fff;
    --content-secondary: #C7C9CC;
    --content-tertiary: #D9D9D9;
    --content-brand: #C58DE7;
    --color-inverse: #030203;

    /* Background */
    --background-primary: #020202;
    --background-secondary: #111012;
    --background-tertiary: #24222E;
    --background-brand: #C58DE7;
    --background-gray: #3D3D3D;

    /* Accent */
    --accent-pink: #D586E0;
    --accent-blue: #91A1FA;
    --accent-green: #77C0AF;
    --accent-lime: #D1DC97;
    --accent-red: #E9A9B3;

    /* Gradient */
    --gradient-border: linear-gradient(to left, #77C0AF 0%, #D1DC97 14.84%, #E9A9B3 32.15%, #D586E0 65.79%, #91A1FA 84.58%);
    --gradient-background: linear-gradient(to left, #D586E0 0%, #91A1FA 98.93%);
    --gradient-content: linear-gradient(to left, #C7C9CC 0%, #3D3D3D 100%);

    /* Font families */
    --sora: "Sora", sans-serif;
    --roboto-mono: "Roboto Mono", monospace;
    --roboto-flex: "Roboto Flex", sans-serif;

    /* Type scale */
    --display-large: 800 72px/130% var(--sora);
    --display-medium: 800 40px/130% var(--sora);
    --display-small: 700 32px/130% var(--sora);

    --overline: 700 16px/150% var(--roboto-mono);

    --paragraph-large: 500 16px/150% var(--roboto-flex);
    --paragraph-medium: 500 14px/150% var(--roboto-flex);
    --paragraph-small: 500 12px/150% var(--roboto-flex);
    --label-medium: 700 20px/150% var(--roboto-flex);
    --label-small: 700 16px/150% var(--roboto-flex);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}