:root, ::backdrop {
    /* GENERAL COLOURS */
    /* background */                                  /* foreground */
    --color-primary: #FF9800;                       --color-primary-text: #ffffff;
    --color-primary-1: #F57C00;                     --color-primary-1-text: #ffffff;
    --color-primary-2: #E65100;                     --color-primary-2-text: #ffffff;
    --color-primary-3: #FFB74D;                     --color-primary-3-text: #000000;
    --color-primary-4: #FFE0B2;                     --color-primary-4-text: #000000;

    --color-accent: #00BCD4;                        --color-accent-text: #000000;
    --color-accent-1: #0097A7;                      --color-accent-1-text: #ffffff;
    --color-accent-2: #006064;                      --color-accent-2-text: #ffffff;
    --color-accent-3: #4DD0E1;                      --color-accent-3-text: #000000;
    --color-accent-4: #B2EBF2;                      --color-accent-4-text: #000000;

    --color-background: #000000;                    --color-background-text: #ffffffdf;
                                                      --color-caption-text: #ffffffb9;
                                                      --color-label-text: #ffffffdf;

    --color-error: #FF1744;                         --color-error-text: #000000;
    --color-alert: #FFEA00;                         --color-alert-text: #000000;
    --color-info: #00E5FF;                          --color-info-text: #000000;
    --color-success: #00C853;                       --color-success-text: #ffffff;

    --color-not-accent: transparent;                  --color-not-accent-text: var(--color-background-text);

    --color-scheme: light;

    /* CODE BLOCKS */
    --color-code: #263238;                          --color-code-text: #ffffff;
    --color-quote: #212121;                         --color-quote-text: #ffffffcc;
    --color-short-code: #424242;                    --color-short-code-text: #ffffffcc;
    --color-keyboard: #37474F;                      --color-keyboard-text: #ffffff;

    --color-scheme-code: dark;

    --size-keyboard: 1.5em;
    --padding-keyboard: 0.375em;
    --padding-code: 12px;

    --radius-code: 0;
    --radius-short-code: 0.125em;
    --border-code: none;
    --border-short-code: none;

    --shadow-keyboard: 0 1px 1px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24);

    /* BUTTONS */
    --color-button: var(--color-primary);             --color-button-text: var(--color-primary-text);
    --color-button-hover: var(--color-primary);       --color-button-hover-text: var(--color-primary-text);
    --color-button-active: var(--color-primary);      --color-button-active-text: var(--color-primary-text);
    --color-flat-button: transparent;                 --color-flat-button-text: var(--color-primary);
    --color-flat-button-hover: #FF980020;           --color-flat-button-hover-text: var(--color-primary-2);
    --color-flat-button-active: #FF980030;          --color-flat-button-active-text: var(--color-primary-3);

    /* LINKS */
    --color-link-text: #C6FF00;
    --color-link-hover-text: #EEFF41;
    --color-link-active-text: #C6FF0080;
    --color-link-visited-text: #C6FF00;
    --color-link-visited-hover-text: #EEFF41;

    /* TOASTS */
    --color-callout: #546e7a;                       --color-callout-text: #ffffff;
    --color-callout-1: #37474f;                     --color-callout-1-text: #ffffff;
    --color-callout-2: #78909c;                     --color-callout-2-text: #ffffff;
                                                      --color-callout-button-text: var(--color-accent-4);

    /* CHECKBOXES */
    --color-checkbox: var(--color-not-accent);        --color-checkbox-text: var(--color-accent);
    --color-checkbox-hover: var(--color-not-accent);  --color-checkbox-hover-text: var(--color-accent);
    --color-checkbox-active: var(--color-accent);     --color-checkbox-active-text: var(--color-accent-text);
    --color-checkbox-indeterminate: var(--color-accent);--color-checkbox-indeterminate-text: var(--color-accent-text);
    --color-checkbox-indeterminate-hover: var(--color-accent);--color-checkbox-indeterminate-hover-text: var(--color-accent-text);
    --color-checkbox-active-hover: var(--color-accent);--color-checkbox-active-hover-text: var(--color-accent-text);
    --color-radio: var(--color-not-accent);           --color-radio-text: var(--color-accent);
    --color-radio-active: var(--color-not-accent);    --color-radio-active-text: var(--color-accent);
    --color-radio-hover: var(--color-not-accent);     --color-radio-hover-text: var(--color-accent);
    --color-radio-active-hover: var(--color-not-accent);--color-radio-active-hover-text: var(--color-accent);

    --color-switch: #eeeeee;                        --color-switch-thumb: #757575;
    --color-switch-on: var(--color-accent-4);         --color-switch-thumb-on: var(--color-accent);
    --color-switch-hover: #eeeeee;                  --color-switch-thumb-hover: #757575;
    --color-switch-on-hover: var(--color-accent-4);   --color-switch-thumb-on-hover: var(--color-accent);

    /* RANGES */
    --color-range: var(--color-accent-4);            --color-range-text: var(--color-accent);
    --color-range-hover: var(--color-accent-4);      --color-range-hover-text: var(--color-accent);

    /* CARDS */
    --color-card: #212121;                          --color-card-text: #000000df;
    --color-figcaption-text: #000000df;

    /* NAVBAR */
    --color-navbar: #212121;            --color-navbar-text: var(--color-primary-text);
    --color-navbar-link: var(--color-primary-text);

    /* NAVRAIL */
    --color-navrail: #424242;           --color-navrail-text: var(--color-primary-text);
    --color-navrail-link: var(--color-primary-text);
    --color-navrail-link-hover: var(--color-primary-3);
    --color-navrail-link-selected: var(--color-primary-3);

    /* SIDENAV */
    --color-sidenav: transparent;       --color-sidenav-text: var(--color-caption-text);

    /* BREADCRUMBS */
    --color-breadcrumbs: var(--color-navbar);     --color-breadcrumbs-text: var(--color-navbar-text);
    --color-breadcrumbs-link: var(--color-navbar-text);
    --color-breadcrumbs-separator: var(--color-navbar-text);

    --height-breadcrumbs: 48px;
    --padding-breadcrumbs: 8px;
    --shadow-breadcrumbs: var(--shadow-navbar);
    --border-breadcrumbs: none;
    --radius-breadcrumbs: 0;
    --separator-breadcrumbs: "  >  ";

    /* TABS */
    --color-tab: var(--color-navbar);                --color-tab-text: var(--color-navbar-text);
    --color-tab-selected: var(--color-navbar);       --color-tab-selected-text: var(--color-navbar-text);
    --color-tab-hover: var(--color-navbar);          --color-tab-hover-text: var(--color-navbar-text);
    --color-tab-hover-selected: var(--color-navbar); --color-tab-hover-selected-text: var(--color-navbar-text);


    /* DIVIDERS */
    --line-divider: 1px solid #00000080;

    --color-table: #fafafa;                        --color-table-text: #000000;
    --color-row-odd: #00000010;                    --color-row-odd-text: #000000;
    --color-row-even: transparent;                   --color-row-even-text: #000000;
    --color-row-header: var(--color-primary-1);      --color-row-header-text: var(--color-primary-1-text);

    /* BADGES */
    --color-badge: var(--color-accent);              --color-badge-text: var(--color-accent-text);

    /* AVATARS */
    --radius-avatar: 0;

    /* BUBBLES */
    --color-bubble: var(--color-accent-1);           --color-bubble-text: var(--color-accent-1-text);
    --color-bubble-alt: var(--color-accent-4);       --color-bubble-alt-text: var(--color-accent-4-text);

    /* INPUTS */
    --color-input: #ffffff;                        --color-input-text: #000000bb;
    --color-input-hover: #ffffff;                  --color-input-hover-text: #000000bb;
    --color-input-active: #ffffff;                 --color-input-active-text: #000000df;
    --color-flat-input: transparent;                 --color-flat-input-text: #000000bb;
    --color-flat-input-hover: transparent;           --color-flat-input-hover-text: #000000bb;
    --color-flat-input-active: transparent;          --color-flat-input-active-text: #000000df;

    /* TEXTAREAS */
    --color-textarea: #ffffff;                        --color-textarea-text: #000000bb;
    --color-textarea-hover: #ffffff;                  --color-textarea-hover-text: #000000bb;
    --color-textarea-active: #ffffff;                 --color-textarea-active-text: #000000df;
    --color-flat-textarea: transparent;                 --color-flat-textarea-text: #000000bb;
    --color-flat-textarea-hover: transparent;           --color-flat-textarea-hover-text: #000000bb;
    --color-flat-textarea-active: transparent;          --color-flat-textarea-active-text: #000000df;

    /* MENUS */
    --color-toolbar: #ffffff;                         --color-toolbar-text: #000000bb;
    --color-menu: #ffffff;                            --color-menu-text: #000000bb;
    --color-menu-item: transparent;                     --color-menu-item-text: #000000bb;
    --color-menu-item-hover: #00000010;               --color-menu-item-hover-text: #000000bb;

    /* DIALOGS */
    --color-modal-backdrop: radial-gradient(circle, #00000040 12.5%, #000000cc 100%);

    --tap-highlight-color: transparent;
}