/* =====================================================================
   SHOP COLOR SETTINGS  -  the only file you need to change the colors
   =====================================================================
   HOW TO USE:
   1. Find the item you want to change below.
   2. Replace the color code (e.g. #358678) with your new color.
      Pick a color with any online color picker (search "color picker"),
      then copy the 6-character code, e.g. #1a73e8.
   3. Save this file and refresh the shop (press Ctrl+F5 in the browser
      if the change does not appear immediately).

   NOTE: some names below say "green" because that was the original
   theme color. You can put ANY color in them (blue, red, purple...).
   The name will not affect anything - only the color code matters.
   ===================================================================== */

:root {
    /* Main brand color: top bar, buttons, links, price tags, icons ... */
    --color-main-green: #358678;

    /* Lighter shade of the main color: hover effects, small accents ... */
    --color-main-green-2: #5fb7a8;

    /* Page background: the light grey area behind all the content */
    --color-background: #f5f5f5;

    /* Box background: cards, menus, product boxes, footer boxes ... */
    --color-background-2: #ffffff;

    /* Text colors, from darkest to lightest */
    --color-text-1: #222222;   /* headings, strongest text                 */
    --color-text-2: #333333;   /* normal dark text                         */
    --color-text-3: #5a5a5a;   /* medium grey text                         */
    --color-text-4: #6c6c6c;   /* light grey text, captions, placeholders  */
    --color-text-5: #ffffff;   /* text shown ON TOP of colored/dark areas  */
}