/******************************************************************************/
/* Common definitions. */
/******************************************************************************/

:root
{
    /* Primary (blue) light to dark. */
    --clrPrimary0: #DBE6E9;
    --clrPrimary1: #B6CCD3;
    --clrPrimary2: #80A6B1;
    --clrPrimary3: #498090;
    --clrPrimary4: #306777;
    --clrPrimary5: #164D5D;
    --clrPrimary6: #000111;


    /* Secondary (grey) light to dark. */
    --clrSecondary0: #FFFFFF;
    --clrSecondary1: #EBEBEB;
    --clrSecondary2: #C1C1C1;
    --clrSecondary3: #757575;
    --clrSecondary4: #5C5C5C;
    --clrSecondary5: #292929;
    --clrSecondary6: #0F0F0F;


    /* Accents (light to dark in each section). */
    --clrAccentBlue0: #99C8FF;
    --clrAccentBlue1: #4D9EFF;
    --clrAccentBlue2: #0075FF;
    --clrAccentBlue3: #0042CC;
    --clrAccentBlue4: #000F99;

    --clrAccentRed0: #E9BDAF;
    --clrAccentRed1: #D98B73;
    --clrAccentRed2: #C85937;
    --clrAccentRed3: #AE401E;
    --clrAccentRed4: #7C0D00;
    
    --clrAccentCream0: #FFFFF6;
    --clrAccentCream1: #FFFFE9;
    --clrAccentCream2: #FFFFE0;
    --clrAccentCream3: #E5E5C6;
    --clrAccentCream4: #99997A;

    --clrAccentGreen0: #B2D9B2;
    --clrAccentGreen1: #66B366;
    --clrAccentGreen2: #008000;
    --clrAccentGreen3: #006700;
    --clrAccentGreen4: #004D00;
}


:root {
    /* STEPBible system-wide definitions which I've seen in other files.  Probably I should be picking these up from somewhere else, but I haven't worked out where. */
    --clrHighlight: #17758F;
    --clrHighlightBg: #17758F;
    --clrStrongText: #447888;
    --clrLexiconFocusBG: #c8d8dc;
    --clrRelatedWordBg: #b2e5f3;
    --clrBackground: #ffffff;
    --clrText: #5d5d5d;
    --clr2ndHover: #d3d3d3;
    --simulated-sidebar-width: 100%;

    --defaultFontSize: medium;

    --minimumSizeOfBigScreens: 960;

    /* Panel edge spacing used by content pages. */
    --jframework-panel-edge-spacing: 5px;

    
    /* Definitions common to framework applications. */
    --jframework-clrPopUpMenuItemBackgroundUnselected: var(--clrLexiconFocusBG);
    --jframework-clrInfoBoxBackground: var(--clrLexiconFocusBG);
    --jframework-clrPopUpMenuItemBackgroundSelected: var(--clrHighlight);

    --jframework-clrSearchBoxBackground: var(--jframework-clrInfoBoxBackground);

    --jframework-clrStandardBorder: var(--clrHighlight);
    --jframework-clrButtonText: var(--clrHighlight);
    --jframework-clrButtonHover: var(--jframework-clrPopUpMenuItemBackgroundUnselected);
    --jframework-clrGreyedBtnText: rgb(192, 192, 192);
    
    --jframework-clrStandoutText: var(--clrHighlight);
    --jframework-clrDividerGrip: var(--clrSecondary2);
    --jframework-clrDividerGripHover: var(--clrHighlight);
    --jframework-clrDividerGripActive: var(--clrPrimary4);
    --jframework-clrDividerBgHover: var(--clrPrimary0);

    --jframework-clrPopUpMenuItemTextSelected: white;
    --jframework-clrPopUpMenuItemTextUnselected: black;

    --jframework-fontFamilyPopUpMenuItem: sans-serif;
    --jframework-fontSizePopUpMenuItem: medium;
    
    --jframework-popUpOverlayZIndex: 999;
    --jframework-popUpZIndex: 1000;

    --jframework-clrLink: blue;
    --jframework-clrLinkHighlightBackground: #b2e5f3;
    --jframework-clrLinkHighlightForeground: var(--jframework-clrLink);
}
    

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

        
body, html {
    height: 100%;
    width: 100%;
    font-size: var(--defaultFontSize);
    background: var(--clrBackground);
}



/*--- ChatGPT recommends using buttons in place of <a> as making things more accessible. ---*/

.jframework-linkAsButton jframework-clickable {
    color: var(--clrHighlight);
    cursor: pointer;
}

.jframework-linkAsButton {
    background: none;
    color: var(--jframework-clrLink);
    text-decoration: underline;
    border: none;
    cursor: pointer;
}


.jframework-linkAsButton:hover {
    background: var(--jframework-clrLinkHighlightBackground);
    color: var(--jframework-clrLinkHighlightForeground) !important;
}



/*--- Search box. --- */
.jframework-tableWithSearchBox-highlightTableEntry {
    background: var(--jframework-clrPopUpMenuItemBackgroundUnselected) !important;
}



/*--- Text. ---*/
.jframework-standardText {
    font-family: Georgia, serif;
    font-size: var(--defaultFontSize) !important;
}