@font-face {
    font-display: swap;
    font-family: Quicksand;
    font-style: normal;
    font-weight: 400;
    src: url("../fonts/quicksand-e9SWZXX.woff2") format("woff2");
}

:root {
    --colour-key: oklch(0.8718 0.0727 286.95);
    --colour-primary: oklch(0.4 0.112 286.95);
    --colour-primary-fixed-dim: oklch(0.8 0.112 286.95);
    --colour-on-primary: oklch(1 0 286.95);
    --colour-primary-container: oklch(0.9 0.112 286.95);
    --colour-on-primary-container: oklch(0.3 0.112 286.95);
    --colour-secondary: oklch(0.4 0.072 296.95);
    --colour-on-secondary: oklch(1 0.072 296.95);
    --colour-secondary-container: oklch(0.9 0.072 296.95);
    --colour-on-secondary-container: oklch(0.3 0.072 296.95);
    --colour-tertiary: oklch(0.4 0.112 348.95);
    --colour-on-tertiary: oklch(1 0.112 348.95);
    --colour-tertiary-container: oklch(0.9 0.112 348.95);
    --colour-on-tertiary-container: oklch(0.3 0.112 348.95);
    --colour-error: oklch(0.4 0.12 12);
    --colour-on-error: oklch(1 0.12 12);
    --colour-error-container: oklch(0.9 0.12 12);
    --colour-on-error-container: oklch(0.3 0.12 12);
    --colour-surface: oklch(0.98 0.0012 286.95);
    --colour-on-surface: oklch(0.1 0.0012 286.95);
    --colour-surface-variant: oklch(0.9 0.0264 286.95);
    --colour-on-surface-variant: oklch(0.3 0.0264 286.95);
    --colour-surface-container-highest: oklch(0.9 0.0012 286.95);
    --colour-surface-container-high: oklch(0.92 0.0012 286.95);
    --colour-surface-container: oklch(0.94 0.0012 286.95);
    --colour-surface-container-low: oklch(0.95 0.0012 286.95);
    --colour-surface-container-lowest: oklch(1 0.0012 286.95);
    --colour-outline: oklch(0.6 0.0264 286.95);
    --colour-outline-variant: oklch(0.8 0.0264 286.95);

    @media (prefers-color-scheme: dark) {
        --colour-primary: oklch(0.8 0.112 286.95);
        --colour-on-primary: oklch(0.2 0.112 286.95);
        --colour-primary-container: oklch(0.3 0.112 286.95);
        --colour-on-primary-container: oklch(0.9 0.112 286.95);
        --colour-secondary: oklch(0.8 0.072 296.95);
        --colour-on-secondary: oklch(0.2 0.072 296.95);
        --colour-secondary-container: oklch(0.3 0.072 296.95);
        --colour-on-secondary-container: oklch(0.9 0.072 296.95);
        --colour-tertiary: oklch(0.8 0.112 348.95);
        --colour-on-tertiary: oklch(0.2 0.112 348.95);
        --colour-tertiary-container: oklch(0.3 0.112 348.95);
        --colour-on-tertiary-container: oklch(0.9 0.112 348.95);
        --colour-error: oklch(0.8 0.12 12);
        --colour-on-error: oklch(0.2 0.12 12);
        --colour-error-container: oklch(0.3 0.12 12);
        --colour-on-error-container: oklch(0.9 0.12 12);
        --colour-surface: oklch(0.06 0.0012 286.95);
        --colour-on-surface: oklch(0.9 0.0012 286.95);
        --colour-surface-variant: oklch(0.3 0.0264 286.95);
        --colour-on-surface-variant: oklch(0.8 0.0264 286.95);
        --colour-surface-container-highest: oklch(0.26 0.0012 286.95);
        --colour-surface-container-high: oklch(0.24 0.0012 286.95);
        --colour-surface-container: oklch(0.22 0.0012 286.95);
        --colour-surface-container-low: oklch(0.19 0.0012 286.95);
        --colour-surface-container-lowest: oklch(0.04 0.0012 286.95);
        --colour-outline: oklch(0.6 0.0264 286.95);
        --colour-outline-variant: oklch(0.3 0.0264 286.95);
    }

    --tblr-illustrations-primary: var(--colour-primary-fixed-dim);

    --typeface-plain:
        system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";
    --typeface-brand:
        Quicksand, ui-rounded, "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", "Noto Color Emoji";

    --headline-large: 400 2rem / 2.5rem var(--typeface-brand);
    --headline-medium: 400 1.75rem / 2.25rem var(--typeface-brand);
    --headline-small: 400 1.5rem / 2rem var(--typeface-brand);
    --title-large: 400 1.375rem / 1.75rem var(--typeface-brand);
    --title-medium: 500 1rem / 1.5rem var(--typeface-plain);
    --title-small: 500 0.875rem / 1.25rem var(--typeface-plain);
    --body-large: 400 1rem / 1.5rem var(--typeface-plain);
    --body-medium: 400 0.875rem / 1.25rem var(--typeface-plain);
    --body-small: 400 0.75rem / 1rem var(--typeface-plain);
    --label-large: 500 0.875rem / 1.25rem var(--typeface-plain);
    --label-medium: 500 0.75rem / 1rem var(--typeface-plain);

    --icon-colour: var(--colour-on-surface-variant);
    --icon-size: 1em;
    --nav-height: 80px;

    --extra-small-radius: 4px;
    --small-radius: 8px;
    --medium-radius: 12px;
    --large-radius: 16px;
    --large-increased-radius: 20px;
    --extra-large-increased-radius: 32px;

    --small-transition-effect: 150ms cubic-bezier(0.31, 0.94, 0.34, 1);
    --default-transition-spatial: 500ms cubic-bezier(0.38, 1.21, 0.22, 1);
    --default-transition-effect: 200ms cubic-bezier(0.34, 0.8, 0.34, 1);
}