:root {

/*********************
 *    COLORS         *
 *********************/

    /* primary/secondary colors */
    --primary: #800080;
    --primary-darker: #400040;
    --primary-lighter: #c080c0;
    --primary-lightest: #e6cce6;
    --secondary: #ff8800;
    --secondary-lighter: #ffc480;

    /* general colors */
    --white: #ffffff;
    --light-gray: #c0c0c0;
    --gray: #808080;
    --dark-gray: #404040;
    --black: #000000;

    /* default bg/font colors */
    --default-text-color: #333333;
    --default-bg-color: #fffcf8;

    /* navigation/footer */
    --nav-bg-color: var(--primary);
    --nav-text-color: var(--white);

    /* custom scrollbars */
    --scrollbar-indicator-color: #aaaaaa;
    --scrollbar-indicator-hover-color: #555555;
    --scrollbar-track-bg-color: transparent;

    /* buttons */
    --button-primary-bg-color: var(--primary);
    --button-primary-text-color: var(--default-bg-color);
    --button-secondary-bg-color: var(--secondary);
    --button-secondary-text-color: var(--default-bg-color);
    --button-hover-bg-color: var(--primary);
    --button-hover-text-color: var(--default-bg-color);
    --button-focus-border-color: var(--primary);
    --button-disabled-bg-color: #bbbbbb;

    /* shadow-colors */
    --primary-shadow-color: var(--primary-darker);
    --preview-canvas-shadow-color: var(--gray);

    /* border colors */
    --border-fieldset: 1px solid var(--primary-lightest);
    --border-input: 1px solid var(--light-gray);


/*********************
 *    DIMENSIONS     *
 *********************/

    /* general */
    --default-font-size: 12pt;
}