/* Global variables */
:root {
  /* Default font family */
  --default-fontFamily: 'Bariol webfont', sans-serif;

  /* Default values */
  --default-backgroundColor:#fafaf8;
  --default-backgroundColorLighten5: #ffffff;
  --default-backgroundColorLighten10: #ffffff;
  --default-backgroundColorLighten20: #ffffff;
  --default-backgroundColorLighten30: #ffffff;
  --default-backgroundColorDarken5: #efefe9;
  --default-backgroundColorDarken10: #e5e5da;
  --default-backgroundColorDarken20: #cfcfbc;
  --default-backgroundColorDarken30: #baba9f;
  --default-backgroundColorAlpha8: rgba(250, 250, 248, 0.08);
  --default-backgroundColorAlpha12: rgba(250, 250, 248, 0.12);
  --default-backgroundColorAlpha50: rgba(250, 250, 248, 0.5);
  --default-backgroundColorAlpha65: rgba(250, 250, 248, 0.65);

  --default-fontColor:#333333;
  --default-alternateFontColor:#363a43;
  --default-accentFontColor:#8e2115;
  --default-accentFontColorLighten5: #8a2937;
  --default-accentFontColorLighten10: #9d2f3f;
  --default-accentFontColorLighten20: #c53a4e;
  --default-accentFontColorLighten30: #d06272;
  --default-accentFontColorDarken5: #621d27;
  --default-accentFontColorDarken10: #4f171f;
  --default-accentFontColorDarken20: #270c10;
  --default-accentFontColorDarken30: #000000;
  --default-accentFontColorAlpha8: rgba(142, 33, 21, 0.08);
  --default-accentFontColorAlpha12: rgba(142, 33, 21, 0.12);
  --default-accentFontColorAlpha50: rgba(142, 33, 21, 0.5);
  --default-accentFontColorAlpha65: rgba(142, 33, 21, 0.65);

  --default-primaryColor:#acae25;
  --default-primaryColorLighten5:#c1c329;
  --default-primaryColorLighten10:#d1d332;
  --default-primaryColorLighten20:#dbdc5d;
  --default-primaryColorLighten30:#e4e587;
  --default-primaryColorDarken5:#979921;
  --default-primaryColorDarken10:#82841c;
  --default-primaryColorDarken20:#595a13;
  --default-primaryColorDarken30:#2f300a;
  --default-primaryColorAlpha8:rgba(172, 174, 37, 0.08);
  --default-primaryColorAlpha12:rgba(172, 174, 37, 0.12);
  --default-primaryColorAlpha50:rgba(172, 174, 37, 0.5);
  --default-primaryColorAlpha65:rgba(172, 174, 37, 0.65);
  --default-primaryColorFont:#ffffff;

  --default-secondaryColor:#8e2115;
  --default-secondaryColorLighten5:#a42618;
  --default-secondaryColorLighten10:#ba2b1c;
  --default-secondaryColorLighten20:#df3c2a;
  --default-secondaryColorLighten30:#e66456;
  --default-secondaryColorDarken5:#781c12;
  --default-secondaryColorDarken10:#62170e;
  --default-secondaryColorDarken20:#350c08;
  --default-secondaryColorDarken30:#090201;
  --default-secondaryColorAlpha8:rgba(142, 33, 21, 0.08);
  --default-secondaryColorAlpha12:rgba(142, 33, 21, 0.12);
  --default-secondaryColorAlpha50:rgba(142, 33, 21, 0.5);
  --default-secondaryColorAlpha65:rgba(142, 33, 21, 0.65);
  --default-secondaryColorFont:#ffffff;

  --default-secondaryColorAlternate:#8e2115;

  --default-alt1Color:#6f5847;
  --default-alt1ColorLighten5:#7f6451;
  --default-alt1ColorLighten10:#8e715b;
  --default-alt1ColorLighten20:#a78a75;
  --default-alt1ColorLighten30:#bba594;
  --default-alt1ColorDarken5:#5f4c3d;
  --default-alt1ColorDarken10:#503f33;
  --default-alt1ColorDarken20:#31271f;
  --default-alt1ColorDarken30:#120e0b;
  --default-alt1ColorAlpha8:rgba(111, 88, 71, 0.08);
  --default-alt1ColorAlpha12:rgba(111, 88, 71, 0.12);
  --default-alt1ColorAlpha50:rgba(111, 88, 71, 0.5);
  --default-alt1ColorAlpha65:rgba(111, 88, 71, 0.65);
  --default-alt1ColorFont:#ffffff;

  --default-alt2Color:#eaeaea;
  --default-alt2ColorLighten5:#f7f7f7;
  --default-alt2ColorLighten10:#ffffff;
  --default-alt2ColorLighten20:#ffffff;
  --default-alt2ColorLighten30:#ffffff;
  --default-alt2ColorDarken5:#dddddd;
  --default-alt2ColorDarken10:#d0d0d0;
  --default-alt2ColorDarken20:#b7b7b7;
  --default-alt2ColorDarken30:#9d9d9d;
  --default-alt2ColorAlpha8:rgba(234, 234, 234, 0.08);
  --default-alt2ColorAlpha12:rgba(234, 234, 234, 0.12);
  --default-alt2ColorAlpha50:rgba(234, 234, 234, 0.5);
  --default-alt2ColorAlpha65:rgba(234, 234, 234, 0.65);
  --default-alt2ColorFont:#000000;

  /* Document */
  --default-invoiceColor:#61734c;
  --default-creditNoteColor:#906624;
  --default-deliveryNoteColor:#457D73;
  --default-orderColor:#6f5847;
  --default-draftDocumentColor:#eb9246;
  --default-documentBottomTitle:#ffffff;
  --default-titleIconColor:#acae25;

  /* Card color */
  --default-cardBackgroundColor:#ffffff;
  --default-cardFontColor:#333333;
  --default-cardCommentsColor:#797979;

  /* Quantity select button */
  --default-qtySelectBtnBackgroundColor:#acae25;
  --default-qtySelectBtnFontColor:#ffffff;

  /* Aisle icon color, for promo aisles */
  --default-aisleIconColor:#ff1c1e;

  /* Values that can be changed per theme */
  --fontFamily: var(--default-fontFamily);

  --backgroundColor: var(--default-backgroundColor);
  --backgroundColorLighten5: var(--default-backgroundColorLighten5);
  --backgroundColorLighten10: var(--default-backgroundColorLighten10);
  --backgroundColorLighten20: var(--default-backgroundColorLighten20);
  --backgroundColorLighten30: var(--default-backgroundColorLighten30);
  --backgroundColorDarken5: var(--default-backgroundColorDarken5);
  --backgroundColorDarken10: var(--default-backgroundColorDarken10);
  --backgroundColorDarken20: var(--default-backgroundColorDarken20);
  --backgroundColorDarken30: var(--default-backgroundColorDarken30);
  --backgroundColorAlpha8: var(--default-backgroundColorAlpha8);
  --backgroundColorAlpha12: var(--default-backgroundColorAlpha12);
  --backgroundColorAlpha50: var(--default-backgroundColorAlpha50);
  --backgroundColorAlpha65: var(--default-backgroundColorAlpha65);

  --fontColor: var(--default-fontColor);
  --alternateFontColor: var(--default-alternateFontColor);
  --accentFontColor: var(--default-accentFontColor);
  --accentFontColorLighten5: var(--default-accentFontColorLighten5);
  --accentFontColorLighten10: var(--default-accentFontColorLighten10);
  --accentFontColorLighten20: var(--default-accentFontColorLighten20);
  --accentFontColorLighten30: var(--default-accentFontColorLighten30);
  --accentFontColorDarken5: var(--default-accentFontColorDarken5);
  --accentFontColorDarken10:var(--default-accentFontColorDarken10);
  --accentFontColorDarken20:var(--default-accentFontColorDarken20);
  --accentFontColorDarken30:var(--default-accentFontColorDarken30);
  --accentFontColorAlpha8: var(--default-accentFontColorAlpha8);
  --accentFontColorAlpha12: var(--default-accentFontColorAlpha12);
  --accentFontColorAlpha50: var(--default-accentFontColorAlpha50);
  --accentFontColorAlpha65: var(--default-accentFontColorAlpha65);

  --primaryColor: var(--default-primaryColor);
  --primaryColorLighten5: var(--default-primaryColorLighten5);
  --primaryColorLighten10: var(--default-primaryColorLighten10);
  --primaryColorLighten20: var(--default-primaryColorLighten20);
  --primaryColorLighten30: var(--default-primaryColorLighten30);
  --primaryColorDarken5: var(--default-primaryColorDarken5);
  --primaryColorDarken10: var(--default-primaryColorDarken10);
  --primaryColorDarken20: var(--default-primaryColorDarken20);
  --primaryColorDarken30: var(--default-primaryColorDarken30);
  --primaryColorAlpha8: var(--default-primaryColorAlpha8);
  --primaryColorAlpha12: var(--default-primaryColorAlpha12);
  --primaryColorAlpha50: var(--default-primaryColorAlpha50);
  --primaryColorAlpha65: var(--default-primaryColorAlpha65);
  --primaryColorFont: var(--default-primaryColorFont);

  --secondaryColor: var(--default-secondaryColor);
  --secondaryColorLighten5: var(--default-secondaryColorLighten5);
  --secondaryColorLighten10: var(--default-secondaryColorLighten10);
  --secondaryColorLighten20: var(--default-secondaryColorLighten20);
  --secondaryColorLighten30: var(--default-secondaryColorLighten30);
  --secondaryColorDarken5: var(--default-secondaryColorDarken5);
  --secondaryColorDarken10: var(--default-secondaryColorDarken10);
  --secondaryColorDarken20: var(--default-secondaryColorDarken20);
  --secondaryColorDarken30: var(--default-secondaryColorDarken30);
  --secondaryColorAlpha8: var(--default-secondaryColorAlpha8);
  --secondaryColorAlpha12: var(--default-secondaryColorAlpha12);
  --secondaryColorAlpha50: var(--default-secondaryColorAlpha50);
  --secondaryColorAlpha65: var(--default-secondaryColorAlpha65);
  --secondaryColorFont: var(--default-secondaryColorFont);

  --secondaryColorAlternate: var(--default-secondaryColorAlternate);

  --alt1Color: var(--default-alt1Color);
  --alt1ColorLighten5: var(--default-alt1ColorLighten5);
  --alt1ColorLighten10: var(--default-alt1ColorLighten10);
  --alt1ColorLighten20: var(--default-alt1ColorLighten20);
  --alt1ColorLighten30: var(--default-alt1ColorLighten30);
  --alt1ColorDarken5: var(--default-alt1ColorDarken5);
  --alt1ColorDarken10: var(--default-alt1ColorDarken10);
  --alt1ColorDarken20: var(--default-alt1ColorDarken20);
  --alt1ColorDarken30: var(--default-alt1ColorDarken30);
  --alt1ColorAlpha8: var(--default-alt1ColorAlpha8);
  --alt1ColorAlpha12: var(--default-alt1ColorAlpha12);
  --alt1ColorAlpha50: var(--default-alt1ColorAlpha50);
  --alt1ColorAlpha65: var(--default-alt1ColorAlpha65);
  --alt1ColorFont: var(--default-alt1ColorFont);

  --alt2Color: var(--default-alt2Color);
  --alt2ColorLighten5: var(--default-alt2ColorLighten5);
  --alt2ColorLighten10: var(--default-alt2ColorLighten10);
  --alt2ColorLighten20:  var(--default-alt2ColorLighten20);
  --alt2ColorLighten30: var(--default-alt2ColorLighten30);
  --alt2ColorDarken5: var(--default-alt2ColorDarken5);
  --alt2ColorDarken10: var(--default-alt2ColorDarken10);
  --alt2ColorDarken20: var(--default-alt2ColorDarken20);
  --alt2ColorDarken30: var(--default-alt2ColorDarken30);
  --alt2ColorAlpha8: var(--default-alt2ColorAlpha8);
  --alt2ColorAlpha12: var(--default-alt2ColorAlpha12);
  --alt2ColorAlpha50: var(--default-alt2ColorAlpha50);
  --alt2ColorAlpha65: var(--default-alt2ColorAlpha65);
  --alt2ColorFont: var(--default-alt2ColorFont);

  --invoiceColor: var(--default-invoiceColor);
  --draftDocumentColor: var(--default-draftDocumentColor);
  --creditNoteColor: var(--default-creditNoteColor);
  --deliveryNoteColor: var(--default-deliveryNotecolor);
  --orderColor: var(--default-orderColor);
  --documentBottomTitle: var(--default-documentBottomTitle);
  --titleIconColor: var(--default-titleIconColor);

  --cardBackgroundColor: var(--default-cardBackgroundColor);
  --cardFontColor: var(--default-cardFontColor);
  --cardCommentsColor: var(--default-cardCommentsColor);

  --qtySelectBtnBackgroundColor: var(--default-qtySelectBtnBackgroundColor);
  --qtySelectBtnFontColor: var(--default-qtySelectBtnFontColor);

  /* Aisle icon color, for promo aisles */
  --aisleIconColor: var(--default-aisleIconColor);

  /* Action button colors */
  --actionButtonBackgroundColor: var(--primaryColor);
  --actionButtonBackgroundColorDarken5: var(--primaryColorDarken5);
  --actionButtonBackgroundColorDarken10: var(--primaryColorDarken10);
  --actionButtonBackgroundColorDarken20: var(--primaryColorDarken20);
  --actionButtonBackgroundColorDarken30: var(--primaryColorDarken30);
  --actionButtonBackgroundColorLighten5: var(--primaryColorLighten5);
  --actionButtonBackgroundColorLighten10: var(--primaryColorLighten10);
  --actionButtonBackgroundColorLighten20: var(--primaryColorLighten20);
  --actionButtonBackgroundColorLighten30: var(--primaryColorLighten30);
  --actionButtonBackgroundColorAlpha8: var(--primaryColorAlpha8);
  --actionButtonBackgroundColorAlpha12: var(--primaryColorAlpha12);
  --actionButtonBackgroundColorAlpha50: var(--primaryColorAlpha50);
  --actionButtonBackgroundColorAlpha65: var(--primaryColorAlpha65);
  --actionButtonColorFont: var(--primaryColorFont);

  /* Values that cannot be changed per theme */
  --component-backgroundColor:#fafaf8;
  --component-fontColor:#333333;
  --component-fontColorLighten5:#404040;
  --component-fontColorDarken5:#262626;
  --component-fontColorLighten10:#4d4d4d;
  --component-fontColorDarken10:#1a1a1a;
  --component-fontColorLighten20:#666666;
  --component-fontColorDarken20:#000000;
  --component-fontColorLighten30:#808080;
  --component-fontColorDarken30:#000000;
  --component-fontColorAlpha12:rgba(51, 51, 51, 02);
  --component-fontColorAlpha50:rgba(51, 51, 51, 5);

  /* CSS variables to be accessed from javascript */
  --safeAreaInsetTop: env(safe-area-inset-top);
  --safeAreaInsetRight: env(safe-area-inset-right);
  --safeAreaInsetBottom: env(safe-area-inset-bottom);
  --safeAreaInsetLeft: env(safe-area-inset-left);

  /* Header height desktop */
  --headerHeight: 60px;

  /* Navigation bar height */
  --navigationBarHeight: 59px;
}

@media (max-width: 479px) {
  :root {
    /* Header height mobile */
    --headerHeight: 50px;
  }
}