:root {
  // Fonts
  --base-font-family: "Mulish", sans-serif;
  --heading-font-family: "Oswald", sans-serif;
  --accent-font-family: "Cambria", sans-serif; // not added yet
  --base-font-size: 20px;
  --medium-font-size: 16px;
  --smaller-font-size: 14px;

  // Sizes
  --max-width: 1164px;
  --wide: 1400px;
  --gutter: 16px;
  --half-gutter: calc(var(--gutter) * 0.5);
  --2x-gutter: calc(var(--gutter) * 2);
  --4x-gutter: calc(var(--gutter) * 4);
  --sm-border-radius: 4px;
  --border-radius: 8px;

  // Actual colors, see generic dark / light mode usage bellow
  --black: black;
  --white: white;
  --yellow: #FFDC00;
  --medium-yellow: #FFEC6C;
  --light-yellow: #FFFDE4;
  --beige: #F0F0E7;
  --light-beige: #F9F9F1; // This is invented

  --dark-blue: #004154;
  --blue: #white;
  --hover-blue: #004154;

  --dark-steel: #00181E;
  --medium-steel: #002A35;
  --steel: #C9D8DD;
  --light-steel: #EBEFF1;
  --lighter-steel: #E4EAED40;

  --gray: rgba(0, 0, 0, 0.5);
  --light-gray: #FAFAF8;
}

@mixin light-mode-variables {
  --background-default: var(--white);
  --background-inverted: var(--dark-blue);
  --background-steel: var(--light-steel);
  --background-steel-accent: var(--dark-steel);

  //--background-lighter-steel: var(--lighter-steel);
  //--background-lighter-steel-accent: var(--dark-steel);

  --surface-primary: var(--medium-yellow);
  --surface-secondary: var(--light-yellow);

  --surface-accent: var(--beige);
  --surface-accent-darker: var(--steel);

  --text-primary: var(--black);
  --text-inverted: var(--white);
  --link-visited: #030063;

  // Hover and active states, not systematically
  --accordion-hover: #E4EAED;
  --accordion-active: #C9D8DD;

  --footer-background: var(--dark-blue);

  --arrow-text-primary-right: url("/themes/custom/skrymten/assets/images/trfk-icons/light-mode/arrow-text-primary-right.svg");
  --arrow-text-primary-down: url("/themes/custom/skrymten/assets/images/trfk-icons/light-mode/arrow-text-primary-down.svg");

  --pointed-arrow-text-primary: url("/themes/custom/skrymten/assets/images/trfk-icons/light-mode/pointed-arrow-text-primary-right.svg");

  --date-text-primary: url("/themes/custom/skrymten/assets/images/trfk-icons/light-mode/date-text-primary.svg");
  --time-text-primary: url("/themes/custom/skrymten/assets/images/trfk-icons/light-mode/time-text-primary.svg");
  --place-text-primary: url("/themes/custom/skrymten/assets/images/trfk-icons/light-mode/place-text-primary.svg");

  //--text-invert: #{$brand-white};
  //--border-default: #{$neutrals-sand-100};
}


@mixin dark-mode-variables {
  --background-default: var(--dark-steel);
  --background-inverted: var(--white);
  --background-steel: var(--medium-steel);
  --background-steel-accent: var(--light-steel);

  //// per writing same as light mode
  //--background-lighter-steel: var(--lighter-steel);
  //--background-lighter-steel-accent: var(--dark-steel);

  --surface-primary: var(--dark-blue);
  --surface-secondary: var(--medium-steel);
  --surface-accent: #01313F; // One of the many one offs, maybe better to not try to name them all..
  --surface-accent-darker: var(--surface-secondary);

  --text-primary: var(--white);
  --text-inverted: var(--black);
  --link-visited: #B1A4FF;

  // Hover and active states, not systematically
  --accordion-hover: #354C52;
  --accordion-active: #0D3945;

  --footer-background: var(--dark-steel);

  --arrow-text-primary-right: url("/themes/custom/skrymten/assets/images/trfk-icons/dark-mode/arrow-text-primary-right.svg");
  --arrow-text-primary-down: url("/themes/custom/skrymten/assets/images/trfk-icons/dark-mode/arrow-text-primary-down.svg");
  --pointed-arrow-text-primary: url("/themes/custom/skrymten/assets/images/trfk-icons/dark-mode/pointed-arrow-text-primary-right.svg");

  --date-text-primary: url("/themes/custom/skrymten/assets/images/trfk-icons/dark-mode/date-text-primary.svg");
  --time-text-primary: url("/themes/custom/skrymten/assets/images/trfk-icons/dark-mode/time-text-primary.svg");
  --place-text-primary: url("/themes/custom/skrymten/assets/images/trfk-icons/dark-mode/place-text-primary.svg");

}

// Sorry the mess, it is very hard to find a reusable system in the color modes
// so being very explicit with the buttons.
@mixin light-mode-buttons {
  --button-main-text: white;
  --button-text-inverted: white;

  --button-main-primary-bg: #004154;
  --button-main-primary-hover-bg: #146279;
  --button-main-primary-active-bg: #2B86A0;

  --button-main-secondary-bg: white;
  --button-main-secondary-hover-bg: #E4EAED;
  --button-main-secondary-active-bg: #C9D8DD;

}

@mixin dark-mode-buttons {
  --button-main-text: black;
  --button-text-inverted: white;

  --button-main-primary-bg: #FAFAFA;
  --button-main-primary-border: #FAFAFA;
  --button-main-primary-hover-bg: #AFC6CB;
  --button-main-primary-active-bg: #2B86A0;

  --button-main-secondary-bg: #00181E;
  --button-main-secondary-border: white;
  --button-main-secondary-hover-bg: #AFC6CB4D;
  --button-main-secondary-active-bg: #2B86A04D;

}

// same any mode
@mixin attention-buttons {
  --button-attention-primary-bg: #FFD900;
  --button-attention-primary-hover-bg: #D8B800;
  --button-attention-primary-active-bg: #FFD900;
  --button-attention-primary-text: black;
}

// Media queries
$media-desktop: "all and (min-width: 1164px)";
$media-mobile: "all and (max-width: 639px)";
$media-tablet-desktop: "all and (min-width: 640px)";
// $media-mobile-small: "all and (max-width: 375px)";
$media-mobile-tablet: "all and (max-width: 1164px)";
// Below is a one off, and not working perfectly yet..
$media-mobile-tablet-gutter-fix: "all and (max-width: 1192px)";
$media-tablet: "all and (min-width: 640px) and (max-width: 1164px)";