@import url('./styles/reset.scss');
@import url('./styles/fonts.scss');

:root {
    --astronaut-blue: oklch(0.3303 0.078667 242.1936);
    --periwinkle: oklch(0.9124 0.0439 250.42);
    --midnight-blue: oklch(0.3958 0.0893 242.11);

    --bossanova: oklch(0.3442 0.0916 323.14);
    --trendy-pink: oklch(0.5466 0.0925 325.35);

    --zuccini: oklch(0.3235 0.077159 156.9102);
    --amazon: oklch(0.5235 0.0882 155.85);

    --buccaneer: oklch(0.3435 0.0869 23.74);
    --copper-rust: oklch(0.5452 0.0967 23.21);

    --zircon: oklch(0.9823 0.008252 271.3302);
    --athens-gray: oklch(0.9312 0.0084 271.32);

    --gray: oklch(0.5696 0.0117 248.03);
    --cadet-blue: oklch(0.8279 0.0112 256.7);

    --color-primary: var(--astronaut-blue);
    --color-on-primary: white;
    --color-primary-container: var(--periwinkle);
    --color-on-primary-container: var(--midnight-blue);

    --color-secondary: var(--bossanova);
    --color-on-secondary: white;
    --color-secondary-container: var(--trendy-pink);

    --color-tertiary: var(--zuccini);
    --color-on-tertiary: white;
    --color-tertiary-container: var(--amazon);

    --color-error: var(--buccaneer);
    --color-error-container: var(--copper-rust);

    --color-surface: var(--zircon);
    --color-surface-container: var(--athens-gray);

    --color-outline: var(--gray);
    --color-outline-variant: var(--cadet-blue);
}

body {
    font-family: 'Quicksand', sans-serif;
    font-size: 62.5%;
    font-weight: 400;
    margin: 0;
}

h1, h3, h5 {
    font-family: 'Limelight', serif;
    font-weight: 400;
}

h2, h4, h6 {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500;
}