:root {
  /* color-scheme */
  --base-hue-1: 212;
  --base-saturation-1: 28%;
  --base-luminance-1: 28%;

  --background-image: linear-gradient(to right, #222 0%, black 100%);

  /* logo */
  --header-logo-image: url('/env/images/logo_sonic_redezvous.svg');
  --header-logo-width: 13vw;

  /* font sizes */
  --base-size: 16px;
  --type-scale: 1.2;
  --my-font-family-normal: "noto_sans", sans-serif;
  --my-font-family-special: "mexcellent", sans-serif;


  /* padding and margins */
  /* --site-body-width: clamp(800px, 80vw, 1600px); */

  /* borders */
  --border-radius: 4px;
  --border-radius--large: 9px;


  /* colors */
  /* --text-primary: black;
  --text-primary-inverse: white; // cloud be calculated hsla */

}





@font-face {
  font-family: "mexcellent";
  font-style: normal;
  font-weight: normal;
  src: url("/env/fonts/mexcellent/mexcellent_rg.otf") format("opentype");
}

@font-face {
  font-family: "noto_sans";
  font-style: normal;
  font-weight: normal;
  src: url("/env/fonts/noto_sans/NotoSans-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "noto_sans";
  font-style: italic;
  font-weight: normal;
  src: url("/env/fonts/noto_sans/NotoSans-Italic.ttf") format("truetype");
}

@font-face {
  font-family: "noto_sans";
  font-style: normal;
  font-weight: bold;
  src: url("/env/fonts/noto_sans/NotoSans-Bold.ttf") format("truetype");
}

@font-face {
  font-family: "noto_sans";
  font-style: italic;
  font-weight: bold;
  src: url("/env/fonts/noto_sans/NotoSans-BoldItalic.ttf") format("truetype");
}

/*
  1. Defines some standard color combination schemes (aka blocks)
  2. Map colors variables to blocks variables. This wil set the variables for all children of the block
  3. Map components to blocks. This will apply the style to components like body, header, menu etc.

  Important: Each block needs to apply the color and background to itself to be visible on the block component.
*/
body {
  --background-primary: none;
  --text-primary: white;
  --text-secondary: black;
  --background-secondary: var(--highlight-background-light);
  --text-primary-inverse: var(--color-inverse);
  --button-background:var(--color-darker);
  --button-text:var(--text-primary);
  --link-text:var(--text-primary);
  --input-text:var(--text-primary);
  --color-contrast: var(--color-inverse);
  background-color: var(--background-primary);
  color: var(--text-primary);
  background-image: var(--background-image);
  font-family: var(--my-font-family-normal);
  font-size: var(--base-size);
  color: var(--text-primary);
}

.block--transparent {
  --text-secondary: var(--shade-light);
  --color-contrast: var(--color-inverse);
  background-color: var(--background-primary);
  color: var(--text-primary);

}

.article,
.block--highlight-dark {
  --text-secondary: var(--color-light);
  --background-primary: rgba(0,0,0,0.2);
  --button-background:var(--text-primary);
  --button-text:var(--color-darker);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.mobile-header--background,
.block--normal {
  --background-primary: var(--color-normal);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--light {
  --background-primary: var(--color-light);
  background-color: var(--background-primary);
  color: var(--text-primary);



}

.block--dark {
  --background-primary: var(--color-darker);
  --background-secondary: var(--color-normal);
  --text-secondary: var(--text-primary);
  --color-contrast: var(--shade-light);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--shade-light {
  --background-primary: var(--shade-light);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--shade-normal {
  background-color: var(--background-primary);
  color: var(--text-primary);
  --background-primary: var(--shade-normal);
}

.form-block,
.checkout-review-block,
.block--shade-dark {
  --color-contrast: var(--shade-light);
  --background-primary: var(--shade-darker);
  --button-background:var(--color-inverse);
  /* --button-text:var(--color-darker); */

  background-color: var(--background-primary);
  color: var(--text-primary);


}

.block--white {
  --text-primary: black;
  --background-primary: white;
  --text-secondary: var(--color-inverse);
  --background-secondary: var(--highlight-background-dark);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--grey {
  --background-primary: var(--shade-light);
  --color-contrast: var(--color-darker);
  background-color: var(--background-primary);
  color: var(--text-primary);

}

.block--contrast1 {
  --background-primary: var(--color-contrast1);
  background-color: var(--background-primary);
  color: var(--text-primary);
}

.block--contrast2 {
  --background-primary: var(--color-contrast2);
  background-color: var(--background-primary);
  color: var(--text-primary);
  --color-contrast: var(--color-contrast1);
}

/* Show hide content different sites*/
.sugarandspice .hide-sugar,
.sugarandspice .show-sonic {
  display: none;
}
.sonicrendezvous .hide-sonic,
.sonicrendezvous .show-sugar {
  display: none;
}