:root {
    /** 
     ----------------------------------------------------------------
     FAN PASS THEME TOKENS
     ----------------------------------------------------------------
     * @tokens Fonts */
    --fp-body-font: Assistant, Arial, Helvetica, sans-serif;
    --fp-heading-font: Assistant, Arial, Helvetica, sans-serif;
    /* @tokens Colours */
    --fp-text-color: rgb(17, 17, 17);
    --fp-background-color: rgb(255, 255, 255);
    --fp-button-background-color: rgb(214, 4, 85);
    --fp-button-text-color: rgb(255, 255, 255);
    /* Overlay & Modal */
    --fp-overlay-background-color: rgba(0, 0, 0);
    --fp-overlay-background-opacity: 0.2;
    --fp-modal-background-color: rgb(255, 255, 255);
    --fp-modal-text-color: rgb(17, 17, 17);
    --fp-input-background-color: rgb(255, 255, 255);
    --fp-input-border-color: rgb(161, 161, 170);
    /* @tokens Borders */
    --fp-input-border-width: 0.0625rem;
    --fp-input-border-radius: 0.5rem;
    --fp-focus-ring-color: rgb(214, 4, 85, 0);

    /** 
     ----------------------------------------------------------------
     COMPONENTS DEFAULT THEME TOKENS 
     ----------------------------------------------------------------
    */
    /* @tokens Sizes */
    --pu-size-content-max-width: 75rem;
    --pu-size-header-width: 75rem;
    --pu-size-screen-max-width: 180rem;
    /* @tokens Fonts */
    --pu-font-body-family-default: var(--fp-body-font);
    --pu-font-heading-family-default: var(--fp-heading-font);
    --pu-font-body-family: var(--pu-font-body-family-default);
    --pu-font-heading-family: var(--pu-font-heading-family-default);
    /* @tokens Colors */
    --pu-color-base-text: var(--fp-text-color);
    --pu-color-base-background: var(--fp-background-color);
    --pu-color-base-text-inverse: var(--pu-color-base-background);
    --pu-color-base-background-inverse: var(--pu-color-base-text);
    --pu-color-base-text-disabled: var(--pu-color-gray-400);
    --pu-color-base-background-disabled: var(--pu-color-gray-300);
    --pu-color-base-text-subdued: var(--pu-color-gray-400);
    --pu-color-base-background-subdued: var(--pu-color-gray-400);
    --pu-color-base-text-warning: var(--pu-color-red-600);
    --pu-color-base-border: var(--pu-color-gray-200);
    --pu-color-base-border-disabled: var(--pu-color-gray-200);
    --pu-color-base-gradient-background: var(--pu-color-gray-950);
    --pu-color-accent-text: var(--pu-color-base-text);
    --pu-color-accent-background: var(--pu-color-base-background);
    --pu-color-focus-ring: var(--fp-focus-ring-color, var(--pu-color-blue-400));
    --pu-color-focus-ring-border: var(--pu-color-base-text);
    --pu-color-focus-ring-background: var(--pu-color-base-background);
    --pu-border-focus-ring-offset: 0.0625rem;
    --pu-border-focus-ring-width: 2px;
    --pu-border-focus-ring-style: solid;
    --pu-border-focus-ring: var(--pu-border-focus-ring-style) var(--pu-border-focus-ring-width) var(--pu-color-focus-ring);
    --pu-color-skeleton-text: var(--pu-color-gray-300);
    --pu-color-skeleton-background: var(--pu-color-gray-400);
    /* @tokens Borders */
    --pu-border-base-width: var(--pu-border-width-10);
    --pu-border-base-corner-radius: var(--pu-border-radius-0);
    /* @tokens Spacing */
    --pu-space-grid-horizontal-desktop: var(--pu-space-16);
    --pu-space-grid-vertical-desktop: var(--pu-space-16);
    --pu-space-grid-horizontal-mobile: var(--pu-space-8);
    --pu-space-grid-vertical-mobile: var(--pu-space-8);
    /* @tokens Opacity */
    --pu-opacity-base-background: 0;

    /* SURFACE TOKENS */
    /* Button */
    --pu-color-button-background: var(--fp-button-background-color);
    --pu-color-button-text: var(--fp-button-text-color);
    /* Input controls */
    --pu-color-input-label-text: var(--pu-color-gray-800);
    --pu-space-input-label-letter-spacing: 0.05rem;
    --pu-font-input-label-size: var(--pu-font-body-size-md);
    --pu-color-input-text: var(--pu-color-gray-800);
    --pu-color-input-text-hover: var(--pu-color-gray-975);
    --pu-color-input-text-disabled: var(--pu-color-gray-500);
    --pu-space-input-letter-spacing: 0.05rem;
    --pu-color-input-border: var(--fp-input-border-color, var(--pu-color-gray-400));
    --pu-color-input-border-hover: var(--pu-color-gray-500);
    --pu-color-input-border-disabled: var(--pu-color-gray-300);
    --pu-color-input-border-checked: var(--pu-color-blue-700);
    --pu-color-input-border-checked-hover: var(--pu-color-blue-800);
    --pu-border-input-width: var(--fp-input-border-width, var(--pu-border-width-10));
    --pu-color-input-icon-text: var(--pu-color-gray-900);
    --pu-color-input-icon-text-checked: var(--pu-color-gray-25);
    --pu-color-input-icon-text-hover: var(--pu-color-gray-25);
    --pu-color-input-background: var(--fp-input-background-color, var(--pu-color-gray-25));
    --pu-color-input-background-hover: var(--pu-color-gray-100);
    --pu-color-input-background-disabled: var(--pu-color-gray-100);
    --pu-color-input-background-checked: var(--pu-color-blue-600);
    --pu-color-input-help-text: var(--pu-color-gray-400);
    --pu-color-input-placeholder-text: var(--pu-color-gray-500);
    --pu-color-input-required-text: var(--pu-color-gray-400);
    --pu-content-input-required: '*';
    --pu-space-input-required-offset: -2px;
    --pu-color-option-text: var(--pu-color-gray-800);
    --pu-color-option-text-hover: var(--pu-color-gray-975);
    --pu-color-option-text-selected: var(--pu-color-gray-700);
    --pu-color-option-background: var(--pu-color-gray-100);
    --pu-color-option-background-hover: var(--pu-color-gray-50);
    /* Panels */
    --pu-color-panel-border: var(--pu-color-gray-400);
    --pu-color-panel-background: var(--pu-color-gray-25);
    --pu-border-panel-width: 0.0625rem;
    /* Popup */
    --pu-color-popup-overlay-background: var(--pu-color-gray-800);
    --pu-opacity-popup-overlay-background: 0.9;

    /*
    ----------------------------------------------------------------
    DESIGN SYSTEM TOKENS
    ----------------------------------------------------------------
    */
    /* @tokens Fonts */
    --pu-font-heading-size: 1.5rem;
    --pu-font-body-size: 1rem;
    --pu-font-body-scale: 1;
    --pu-font-body-size-xs: 0.75rem;
    --pu-font-body-size-sm: 0.875rem;
    --pu-font-body-size-md: 1rem;
    --pu-font-body-size-lg: 1.25rem;
    --pu-font-body-size-xl: 1.5rem;
    --pu-font-body-size-2xl: 1.75rem;
    --pu-font-body-size-3xl: 2rem;
    --pu-font-heading-scale: 1;
    --pu-font-heading-size-xs: 0.75rem;
    --pu-font-heading-size-sm: 0.875rem;
    --pu-font-heading-size-md: 1rem;
    --pu-font-heading-size-lg: 1.25rem;
    --pu-font-heading-size-xl: 1.5rem;
    --pu-font-heading-size-2xl: 1.75rem;
    --pu-font-heading-size-3xl: 2rem;
    --pu-font-heading-size-4xl: 3rem;
    --pu-font-heading-size-5xl: 4rem;
    --pu-font-base-weight: 400;
    --pu-font-base-weight-light: 300;
    --pu-font-base-weight-regular: 400;
    --pu-font-base-weight-medium: 500;
    --pu-font-base-weight-bold: 700;
    --pu-font-base-weight-semibold: 600;
    --pu-font-base-weight-extrabold: 800;
    --pu-font-base-weight-black: 900;
    /* @tokens Spacing */
    --pu-space-0: 0;
    --pu-space-4: 0.25rem;
    --pu-space-8: 0.5rem;
    --pu-space-12: 0.75rem;
    --pu-space-16: 1rem;
    --pu-space-20: 1.25rem;
    --pu-space-24: 1.5rem;
    --pu-space-32: 2rem;
    --pu-space-40: 2.5rem;
    --pu-space-48: 3rem;
    --pu-space-56: 3.5rem;
    --pu-space-64: 4rem;
    --pu-space-72: 4.5rem;
    --pu-space-80: 5rem;
    --pu-space-88: 5.5rem;
    --pu-space-96: 6rem;
    --pu-space-104: 6.5rem;
    --pu-space-112: 7rem;
    --pu-space-120: 7.5rem;
    --pu-space-128: 8rem;
    /* @tokens Borders */
    --pu-border-radius-0: 0rem;
    --pu-border-radius-5: 0.125rem;
    --pu-border-radius-10: 0.25rem;
    --pu-border-radius-20: 0.5rem;
    --pu-border-radius-30: 0.75rem;
    --pu-border-radius-40: 1rem;
    --pu-border-radius-50: 1.25rem;
    --pu-border-radius-60: 1.5rem;
    --pu-border-radius-full: 624.9375rem;
    --pu-border-width-10: 0.0625rem;
    --pu-border-width-20: 0.125rem;
    --pu-border-width-30: 0.1875rem;
    --pu-border-width-40: 0.25rem;
    --pu-border-width-50: 0.3125rem;
    --pu-border-corner-radius-small: var(--pu-border-width-10);
    --pu-border-corner-radius-medium: var(--pu-border-width-20);
    --pu-border-corner-radius-large: var(--pu-border-width-30);
    --pu-border-corner-radius-x-large: var(--pu-border-radius-40);
    /* @tokens Line height */
    --pu-line-height-denser: 1;
    --pu-line-height-dense: 1.25;
    --pu-line-height-normal: 1.5;
    --pu-line-height-loose: 2;
    --pu-line-height-looser: 2.5;
    /* @tokens Shadow */
    --pu-shadow-x-small: 0 0.0625rem 0.125rem rgba(113, 113, 122, 0.06);
    --pu-shadow-small: 0 0.0625rem 0.125rem rgba(113, 113, 122, 0.12);
    --pu-shadow-medium: 0 0.125rem 0.25rem rgba(113, 113, 122, 0.12);
    --pu-shadow-large: 0 0.125rem 0.5rem rgba(113, 113, 122, 0.12);
    --pu-shadow-x-large: 0 0.25rem 1rem rgba(113, 113, 122, 0.12);
    /* @tokens Transition */
    --pu-transition-x-slow: 1s;
    --pu-transition-slow: 0.5s;
    --pu-transition-medium: 0.25s;
    --pu-transition-fast: 0.15s;
    --pu-transition-x-fast: 0.05s;
    /* @tokens z-indexes */
    --pu-z-index-drawer: 700;
    --pu-z-index-dialog: 800;
    --pu-z-index-dropdown: 900;
    --pu-z-index-toast: 950;
    --pu-z-index-tooltip: 1000;

    /*
    ----------------------------------------------------------------
    COLOUR PALETTE TOKENS
    ----------------------------------------------------------------
    */
    /* Gray */
    --pu-color-gray-25: hsl(0 0% 99.5%);
    --pu-color-gray-50: hsl(0 0% 97.5%);
    --pu-color-gray-100: hsl(240, 5%, 96%);
    --pu-color-gray-200: hsl(240, 6%, 90%);
    --pu-color-gray-300: hsl(240, 5%, 84%);
    --pu-color-gray-400: hsl(240, 5%, 65%);
    --pu-color-gray-500: hsl(240, 4%, 46%);
    --pu-color-gray-600: hsl(240, 5%, 34%);
    --pu-color-gray-700: hsl(240, 5%, 26%);
    --pu-color-gray-800: hsl(240, 4%, 16%);
    --pu-color-gray-900: hsl(240 5.9% 10%);
    --pu-color-gray-950: hsl(240, 12%, 8%);
    --pu-color-gray-975: hsl(240, 8%, 5%);
    /* Red */
    --pu-color-red-50: hsl(0 85.7% 97.3%);
    --pu-color-red-100: hsl(0 93.3% 94.1%);
    --pu-color-red-200: hsl(0 96.3% 89.4%);
    --pu-color-red-300: hsl(0 93.5% 81.8%);
    --pu-color-red-400: hsl(0 90.6% 70.8%);
    --pu-color-red-500: hsl(0 84.2% 60.2%);
    --pu-color-red-600: hsl(0, 72%, 51%);
    --pu-color-red-700: hsl(0 73.7% 41.8%);
    --pu-color-red-800: hsl(0 70% 35.3%);
    --pu-color-red-900: hsl(0 62.8% 30.6%);
    --pu-color-red-950: hsl(0 60% 19.6%);
    /* Green */
    --pu-color-green-50: hsl(138.5 76.5% 96.7%);
    --pu-color-green-100: hsl(140.6 84.2% 92.5%);
    --pu-color-green-200: hsl(141 78.9% 85.1%);
    --pu-color-green-300: hsl(141.7 76.6% 73.1%);
    --pu-color-green-400: hsl(141.9 69.2% 58%);
    --pu-color-green-500: hsl(142.1 70.6% 45.3%);
    --pu-color-green-600: hsl(142.1 76.2% 36.3%);
    --pu-color-green-700: hsl(142.4 71.8% 29.2%);
    --pu-color-green-800: hsl(142.8 64.2% 24.1%);
    --pu-color-green-900: hsl(143.8 61.2% 20.2%);
    --pu-color-green-950: hsl(144.3 60.7% 12%);
    /* Blue */
    --pu-color-blue-50: hsl(213.8 100% 96.9%);
    --pu-color-blue-100: hsl(214.3 94.6% 92.7%);
    --pu-color-blue-200: hsl(213.3 96.9% 87.3%);
    --pu-color-blue-300: hsl(211.7 96.4% 78.4%);
    --pu-color-blue-400: hsl(213.1 93.9% 67.8%);
    --pu-color-blue-500: hsl(217.2 91.2% 59.8%);
    --pu-color-blue-600: hsl(221.2 83.2% 53.3%);
    --pu-color-blue-700: hsl(224.3 76.3% 48%);
    --pu-color-blue-800: hsl(225.9 70.7% 40.2%);
    --pu-color-blue-900: hsl(224.4 64.3% 32.9%);
    --pu-color-blue-950: hsl(226.2 55.3% 18.4%);
}