:root{
    /* Main Theme Variables */
    /* fonts */
    --font-2xl: 26px;
    --font-xl: 22px;
    --font-l: 18px;
    --font-m: 16px;
    --font-s: 14px;
    --font-xs: 12px;

    --font-family: "Inter", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

    /* Main Theme Colour */
    --primary-1000: #740220;
    --primary-900: #A1022C;
    --primary-800: #C30235;
    --primary-700: #D40139;
    --primary-600: #E2013D;
    --primary-500: #E8104A;
    --primary-400: #ED2F62;
    --primary-300: #F6537E;
    --primary-200: #FF93AF;
    --primary-100: #FFBBCD;
    --primary-50: #FFDFE8;
    --primary-25: #FFF7F9;

    /* Dark Theme Colours */
    --dark-1000:#1C1C1C;
    --dark-900: #281010;
    --dark-850: #282828;
    --dark-800: #353535;
    --dark-700: #535353;
    --dark-500: #856666;
    --dark-400: #B39898;
    --dark-300: #D9D9D9;

    /* Grey Colours */
    --grey-1000: #1C1C1C;
    --grey-900: #212121;
    --grey-850: #282828;
    --grey-800: #353535;
    --grey-700: #535353;
    --grey-600: #656565;
    --grey-500: #848484;
    --grey-400: #B1B1B1;
    --grey-300: #D9D9D9;
    --grey-200: #EFEFEF;
    --grey-100: #F4F4F4;
    --grey-50: #F9F9F9;
    --grey-25: #FCFCFC;

    /* Success */
    --success-900:#054F31;
    --success-800:#05603A;
    --success-700:#027A48;
    --success-600:#039855;
    --success-500:#12B76A;
    --success-400:#32D583;
    --success-300:#6CE9A6;
    --success-200:#A6F4C5;
    --success-100:#D1FADF;
    --success-50:#ECFDF3;
    --success-25:#F6FEF9;

    /* Warning */
    --warning-900:#7A2E0E;
    --warning-800:#93370D;
    --warning-700:#B54708;
    --warning-600:#DC6803;
    --warning-500:#F79009;
    --warning-400:#FDB022;
    --warning-300:#FEC84B;
    --warning-200:#FEDF89;
    --warning-100:#FEF0C7;
    --warning-50:#FFFAEB;
    --warning-25:#FFFCF5;

    /* Error */
    --error-900:#7A271A;
    --error-800:#912018;
    --error-700:#B42318;
    --error-600:#D92D20;
    --error-500:#F04438;
    --error-400:#F97066;
    --error-300:#FDA29B;
    --error-200:#FECDCA;
    --error-100:#FEE4E2;
    --error-50:#FEF3F2;
    --error-25:#FFFBFA;

    /* Main Colours */
    --white: #FFF;
    --black: #000;

    /* Light Theme Colours */
    --logo-img-bg: url(../img/allinkl/light-logo.png);
    --logo-icon: url(../img/allinkl/icon-light.png);

    /* Text */
    --text-text-primary:var(--grey-900);
    --text-text-secondary:var(--grey-800);
    --text-text-tertiary:var(--grey-700);
    --text-text-quaternary:var(--grey-500);
    --text-text-body:var(--grey-700);
    --text-text-invert:var(--white);
    --text-text-light:var(--grey-300);

    --text-brand-text-brand-primary:var(--primary-600);
    --text-brand-text-brand-secondary:var(--primary-300);
    --text-brand-text-brand-accent:var(--primary-600);

    --text-success-text-primary:var(--success-700);
    --text-warning-text-primary:var(--warning-700);
    --text-error-text-primary:var(--error-700);

    /* Surface (background colors) */
    --surface-surface-bg:var(--white);
    --surface-surface-bg-accent:var(--white);
    --surface-surface-light:var(--grey-50);
    --surface-surface-primary:var(--grey-100);
    --surface-surface-secondary:var(--grey-200);
    --surface-surface-tertiary:var(--grey-300);
    --surface-surface-quaternary:var(--grey-500);

    --surface-brand-surface-brand-primary:var(--primary-600);
    --surface-brand-surface-brand-secondary:var(--primary-300);
    --surface-brand-surface-brand-tertiary:var(--primary-50);
    --surface-brand-surface-brand-accent:var(--primary-600);
    --surface-brand-surface-brand-subtle:var(--primary-300);
    --surface-brand-surface-brand-quaternary:var(--primary-800);
    --surface-brand-surface-brand-click:var(--primary-900);

    --surface-button-text-button-primary:var(--white);
    --surface-button-text-button-secondary:var(--text-text-tertiary);
    --surface-button-text-button-brand:var(--text-brand-text-brand-secondary);
    --surface-button-text-button-brand-active:var(--text-brand-text-brand-primary);
    --surface-button-text-button-brand-hover:var(--text-brand-text-brand-primary);
    --surface-button-surface-button-primary:var(--surface-surface-bg);
    --surface-button-surface-button-hover:var(--surface-surface-primary);
    --surface-button-surface-button-focused:var(--surface-surface-secondary);
    --surface-button-surface-secondary-button:var(--primary-25);
    --surface-button-surface-secondary-button-active:var(--primary-50);
    --surface-button-surface-secondary-button-hover:var(--primary-100);
    --surface-button-surface-secondary-outline:var(--primary-100);
    --surface-button-surface-secondary-outline-active:var(--primary-50);
    --surface-button-surface-secondary-outline-hover:var(--primary-100);

    --surface-success-surface-primary:var(--success-50);
    --surface-success-surface-secondary:var(--success-500);
    --surface-success-surface-tertiary:var(--success-50);

    --surface-warning-surface-primary:var(--warning-100);
    --surface-warning-surface-secondary:var(--warning-600);
    --surface-warning-surface-tertiary:var(--warning-100);

    --surface-error-surface-primary:var(--error-50);
    --surface-error-surface-secondary:var(--error-500);
    --surface-error-surface-tertiary:var(--error-50);
}

[data-theme="dark"] {
    --logo-img-bg:url(../img/allinkl/dark-logo.png);
    --logo-icon: url(../img/allinkl/icon-dark.png);

    /* Text */
    --text-text-primary:var(--grey-25);
    --text-text-secondary:var(--grey-300);
    --text-text-tertiary:var(--grey-400);
    --text-text-quaternary:var(--grey-400);
    --text-text-body:var(--grey-300);
    --text-text-invert:var(--white);
    --text-text-light:var(--grey-700);

    --text-brand-text-brand-primary:var(--primary-600);
    --text-brand-text-brand-secondary:var(--grey-500);
    --text-brand-text-brand-accent:var(--grey-300);

    --text-success-text-primary:var(--success-300);
    --text-error-text-primary:var(--error-300);
    --text-warning-text-primary:var(--warning-300);

    /* surface (background colors) */
    --surface-surface-bg:var(--grey-1000);
    --surface-surface-bg-accent:var(--white);
    --surface-surface-light:var(--grey-900);
    --surface-surface-primary:var(--grey-850);
    --surface-surface-secondary:var(--grey-800);
    --surface-surface-tertiary:var(--grey-700);
    --surface-surface-quaternary:var(--grey-400);

    --surface-brand-surface-brand-primary:var(--primary-600);
    --surface-brand-surface-brand-secondary:var(--primary-600);
    --surface-brand-surface-brand-tertiary:var(--grey-800);
    --surface-brand-surface-brand-accent:var(--grey-300);
    --surface-brand-surface-brand-subtle:var(--grey-700);
    --surface-brand-surface-brand-quaternary:var(--primary-800);
    --surface-brand-surface-brand-click:var(--primary-900);

    --surface-button-text-button-primary:var(--white);
    --surface-button-text-button-secondary:var(--white);
    --surface-button-text-button-brand:var(--grey-400);
    --surface-button-text-button-brand-active:var(--grey-300);
    --surface-button-text-button-brand-hover:var(--primary-25);
    --surface-button-surface-button-primary:var(--surface-surface-secondary);
    --surface-button-surface-button-hover:var(--surface-surface-primary);
    --surface-button-surface-button-focused:var(--surface-surface-bg);
    --surface-button-surface-secondary-button:var(--grey-1000);
    --surface-button-surface-secondary-button-active:var(--grey-1000);
    --surface-button-surface-secondary-button-hover:var(--grey-900);
    --surface-button-surface-secondary-outline:var(--primary-300);
    --surface-button-surface-secondary-outline-active:var(--primary-600);
    --surface-button-surface-secondary-outline-hover:var(--primary-300);

    --surface-success-surface-primary:var(--success-900);
    --surface-success-surface-secondary:var(--success-500);
    --surface-success-surface-tertiary:var(--success-700);

    --surface-error-surface-primary:var(--error-900);
    --surface-error-surface-secondary:var(--error-500);
    --surface-error-surface-tertiary:var(--error-700);

    --surface-warning-surface-primary:var(--warning-900);
    --surface-warning-surface-secondary:var(--warning-500);
    --surface-warning-surface-tertiary:var(--warning-700);
}