/**
  * Old theme, deprecated
  * TODO clean up usage, remove
  */

/*** Section 1: constants that will not vary by theme, but may only be used by one theme at the moment ***/

body {

    /* text */

    /* base colors */

    /* black */

    --text-color-black-high: #333;
    --text-color-black-medium: rgba(51, 51, 51, 0.7);

    /* white */

    --text-color-white-high: #fff;
    --text-color-white-medium: rgba(255, 255, 255, 0.7);

    /* font family */

    --font-family-latoweb: 'LatoWeb', sans-serif;

    --font-family-montserrat: 'Montserrat', arial, sans-serif;
    --font-family-montserrat-bold: 'MontserratBold', arial, sans-serif;

    /* font */

    --text-h1: 24px/36px var(--font-family-latoweb);
    --text-body1: 14px/20px var(--font-family-latoweb);
}


/*** Section 2: shorthand variables that will automatically update on changing theme ***/

/* light theme */
.theme-light,
html .theme-light-forced {

    /* secondary colors */

    --secondary-white: #fff;

    /* surfaces */

    --surface-main: #ffffff;
    --surface-red-2: #bf1515;
    --surface-grey-1: #fafafa;
    --surface-grey-2: #eee;
    --surface-grey-3: var(--surface-grey-1);
    --surface-grey-6: #dbdbdb;
    --surface-grey-11: #ebebeb;
    --surface-scrim: rgba(255, 255, 255, 0.32);

    /* strokes */

    --stroke-light-grey: #e8e8e8;

    /* icons */

    --icon-active: #333;

    /* text */

    --text-color-high: var(--text-color-black-high);
    --text-color-medium: var(--text-color-black-medium);

    /* context/dropdown menus */

    --context-menu-border: 1px solid #eee;

    /* divider */

    --divider-border: #dfdfdf;

    /* inverted */

    /* TODO: remove this once the library is updated */
    --surface-main-inverted: #333;
    --surface-grey-1-inverted: #222;
    --text-color-high-inverted: var(--text-color-white-high);
}

/* dark theme */
.theme-dark,
html .theme-dark-forced {

    /* secondary colors */

    --secondary-white: #fff;

    /* surfaces */

    --surface-main: #333;
    --surface-red-2: #ff6560;
    --surface-grey-1: #222;
    --surface-grey-2: #444;
    --surface-grey-3: var(--surface-grey-2);
    --surface-grey-6: var(--surface-main);
    --surface-grey-11: var(--secondary-white);
    --surface-scrim: rgba(0, 0, 0, 0.32);

    /* strokes */

    --stroke-light-grey: var(--surface-scrim);

    /* icons */

    --icon-active: #fff;

    /* text */

    --text-color-high: var(--text-color-white-high);
    --text-color-medium: var(--text-color-white-medium);

    /* context/dropdown menus */

    --context-menu-border: 1px solid #444;

    /* divider */

    --divider-border: #444444;

    /* inverted */

    /* TODO: remove this once the library is updated */

    --surface-main-inverted: #fff;
    --surface-grey-1-inverted: #fafafa;
    --text-color-high-inverted: var(--text-color-black-high);
}