:root {
    --colour-primary: oklch(0.47 0.1736 26.35);
    --colour-on-primary: oklch(1 0 26.35);
    --colour-primary-container: oklch(0.9 0.1949 26.35);
    --colour-on-primary-container: oklch(0.3 0.1949 26.35);
    --colour-secondary: oklch(0.4 0.072 26.35);
    --colour-on-secondary: oklch(1 0.072 26.35);
    --colour-secondary-container: oklch(0.9 0.072 26.35);
    --colour-on-secondary-container: oklch(0.3 0.072 26.35);
    --colour-tertiary: oklch(0.4 0.1736 333.83);
    --colour-on-tertiary: oklch(1 0.1736 333.83);
    --colour-tertiary-container: oklch(0.9 0.1736 333.83);
    --colour-on-tertiary-container: oklch(0.3 0.1736 333.83);
    --colour-surface: oklch(0.98 0.0012 26.35);
    --colour-surface-bright: oklch(0.99 0.0012 26.35);
    --colour-on-surface: oklch(0.1 0.0012 26.35);
    --colour-surface-variant: oklch(0.9 0.0264 26.35);
    --colour-on-surface-variant: oklch(0.45 0.0264 26.35);
    --colour-surface-container-highest: oklch(0.9 0.0012 26.35);
    --colour-surface-container-high: oklch(0.92 0.0012 26.35);
    --colour-surface-container: oklch(0.94 0.0012 26.35);
    --colour-surface-container-low: oklch(0.95 0.0012 26.35);
    --colour-surface-container-lowest: oklch(1 0.0012 26.35);
    --colour-outline: oklch(0.6 0.0264 26.35);
    --colour-outline-variant: oklch(0.8 0.0264 26.35);

    @media (prefers-color-scheme: dark) {
        --colour-primary: oklch(0.8 0.1949 26.35);
        --colour-on-primary: oklch(0.2 0.1949 26.35);
        --colour-primary-container: oklch(0.3 0.1949 26.35);
        --colour-on-primary-container: oklch(0.9 0.1949 26.35);
        --colour-secondary: oklch(0.8 0.072 26.35);
        --colour-on-secondary: oklch(0.2 0.072 26.35);
        --colour-secondary-container: oklch(0.3 0.072 26.35);
        --colour-on-secondary-container: oklch(0.9 0.072 26.35);
        --colour-tertiary: oklch(0.8 0.1736 333.83);
        --colour-on-tertiary: oklch(0.2 0.1736 333.83);
        --colour-tertiary-container: oklch(0.3 0.1736 333.83);
        --colour-on-tertiary-container: oklch(0.9 0.1736 333.83);
        --colour-surface: oklch(0.06 0.0012 26.35);
        --colour-on-surface: oklch(0.9 0.0012 26.35);
        --colour-surface-variant: oklch(0.3 0.0264 26.35);
        --colour-on-surface-variant: oklch(0.8 0.0264 26.35);
        --colour-surface-container-highest: oklch(0.26 0.0012 26.35);
        --colour-surface-container-high: oklch(0.24 0.0012 26.35);
        --colour-surface-container: oklch(0.22 0.0012 26.35);
        --colour-surface-container-low: oklch(0.19 0.0012 26.35);
        --colour-surface-container-lowest: oklch(0.04 0.0012 26.35);
        --colour-outline: oklch(0.6 0.0264 26.35);
        --colour-outline-variant: oklch(0.3 0.0264 26.35);
    }

    --typeface-plain: system-ui, sans-serif;
    --typeface-brand:
        Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;

    --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-brand);
    --title-small: 500 0.875rem / 1.25rem var(--typeface-brand);
    --body-large: 400 1.125rem / 1.6875rem var(--typeface-brand);
    --body-medium: 400 0.875rem / 1.25rem var(--typeface-brand);
    --body-small: 400 0.75rem / 1rem var(--typeface-brand);
    --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;

    --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);
}