/*  ==========================================================================
    hb_colours.css
    by  Philip A. C. Ralph
    for Heimatbund Gelsenkirchen
    also used:
    for Bergbausammlung Rotthausen
    for Stadtteilarchiv Rotthausen
    ==========================================================================
*/


/* *****************************************************************
https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables

    This is an experimental technology
    Because this technology's specification has not stabilized, check the compatibility table for usage in various browsers.
    Also note that the syntax and behavior of an experimental technology is subject to change in future versions of browsers
    as the specification changes.


    CSS Variables are entities defined by CSS authors which contain specific values to be reused throughout a document.
    They are set using custom property notation     (e.g.            --main-color: black;)
    and are accessed using the var() function       (e.g. color: var(--main-color);) .

    Complex websites have very large amounts of CSS, often with a lot of repeated values.
    For example, the same colour might be used in hundreds of different places,
    requiring global search and replace if that colour needs to change.
    CSS variables allow a value to be stored in one place, then referenced in multiple other places.
    An additional benefit is semantic identifiers. For example --main-text-color is easier to understand than #00ff00,
    especially if this same color is also used in another context.

    CSS Variables are subject to the cascade, and inherit their value from their parent.

    *****************************************************************
*/

/*  ==========================================
*   Colours
*   ==========================================
*   Variables for the standard colours,
*   common to all Heimatbund websites.
*   ------------------------------------------
*   Variablen für die für die Standardfarben
*   aller Webauftritte des Heimatbundes.
*/


/*  ==========================================
*    Declaring the variables
*   ==========================================
*/

:root {
  --gelsengruen:    #4CAF50;
  --anthrazit:      #333;
  --duenbier_rot:   rgb(128,0,0);
  --duenbier_lila:  rgb(128,0,128);
  --duenbier_grau:  #EEF1F6;
}


/*  ==========================================
*   Using the variables (here in user-defined classes)
*   ==========================================
*/

/* e.g. menu active href */
.one {
    background-color: #4CAF50; /* var(--gelsengruen); */
}

/* e.g. menubar */
.two {
    background-color: #333; /* var(--anthrazit); */
}