/*  This file should contain all of the default css variables for the project.
    These can be overwritten in the theme.css file in the client theme folder */
:root {
    --primary-color: #2e343e;
    --secondary-color: rgba(46, 52, 62, 0.87);
    --accent-color: #e8722f;
    --accent-color-hover: #eb844a;
    --tertiary-color: var(--primary-color);
    --link-color: #428BCA;
    --card-title-color: #191919;
    --form-error-border-color: #e8722f;
    --side-menu-hover-color: #00BCD4;
    --side-menu-hover-text-color: #37474F;
    --side-menu-secondary-color: rgba(46, 52, 62, 0.87);
    --side-menu-secondary-color-rgb: #494e57;
    --info-color: #0076a3;
    --success-color: #00a651;
    --error-color: #da252c;
    --warning-color: #f26522;
    --icon-male-color: royalblue;
    --icon-female-color: salmon;
    --game-icon-points-color: gold;
    --oe-menu-glyph-color: gold;
    --oe-message-icon-new-color: #197b30;
    --oe-message-icon-sadface-color: #9e0b0f;
    --oe-message-icon-waivecoverage-color: #9e0b0f;
    --oe-message-icon-inprocess-color: #e8aa15;
    --oe-message-icon-employer-color: #0076a3;
    --oe-message-icon-admin-color: #0076a3;
    --oe-message-icon-complete-color: #0076a3;
    --validate-text-color: var(--error-color); /* Nobody overrides this, always --error-color */
    --validate-font-size: 12px; /* Nobody overrides this, 12px across the board */
    --pod-subtitle-opacity: 0.54;
    --grid-subheader-opacity: .5;
    --text-body-opacity: 0.87;
    --text-body-color: #191919;
    --primary-gradient: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
    --nav-gradient: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
    --nav-hover-gradient: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
    --card-header-gradient: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
    --page-header-gradient: linear-gradient(rgba(255, 0, 0, 0), rgba(255, 0, 0, 0));
    --icon-drop-shadow: none;
    --card-title-shadow: none;
    --card-subtitle-shadow: none;
    --page-title-shadow: none;
    --menu-icon-drop-shadow: none;
    --menu-item-drop-shadow: none;
    --font-family: 'Open Sans';
    --card-title-font-family: 'PT Sans';
    --card-subtitle-font-family: 'Open Sans';
    --terminal-header-font-family: 'Open Sans';
    --page-header-background-color: white;
    --page-header-color: --primary-color;
    --page-header-title-color: --primary-color;
    
    /* Defining these here because you can't access SASS variables. TODO is
        to remove SASS variables completely, eventually */
    --primary-100: #CCE0FF;
    --primary-200: #99C2FF;
    --primary-300: #66A3FF;
    --primary-400: #3385FF;
    --primary-500: #0065FF;
    --primary-600: #0052CC;
    --primary-700: #003D99;
    --primary-800: #002966;
    --primary-900: #001433;
    --primary-1000: #2E77D0;
    --primary-1100: rgba(5, 68, 104, 0.767);
    --secondary: #f48f29;  /* TODO Uh, port all the colors and name this better? */

    /* This can be a gradient or just a solid color */
    --mobile-login-background: var(--primary-color);

    /* TODO: We could just link the mobile home cards to colors directly,
        but do we want this kind of granularity? */
    --mobile-home-id-card-background-color: var(--accent-color);
    --mobile-home-id-card-border-color: var(--accent-color);
    --mobile-home-claims-background-color: var(--accent-color);
    --mobile-home-claims-border-color: var(--accent-color);
    --mobile-home-plans-background-color: var(--accent-color);
    --mobile-home-plans-border-color: var(--accent-color);
    --mobile-login-button-background-color: var(--primary-color);
    --mobile-dropdown-button-background-color: var(--primary-800);
    --mobile-dropdown-button-color: var(--primary-color);
}