* {
  --brand: #0af;
  --brand: hsla(200 100% 50% 1);

  --brand-hue: 200;
  --brand-saturation: 100%;
  --brand-lightness: 50%;

  --brand-light: hsl(var(--brand-hue) var(--brand-saturation) var(--brand-lightness));
  --link-color-light: hsla(210, 100%, 40%, 1);
  --link-hover-light: hsla(165, 80%, 35%, 1);
  /* --link-background-light: hsla(0 0% 50% 1); */



  --text1-light: hsl(var(--brand-hue) var(--brand-saturation) 10%);
  --text2-light: hsl(var(--brand-hue) 30% 30%);
  --text3-light: hsl(var(--brand-hue) 15% 85%);
  --surface1-light: hsl(var(--brand-hue) 25% 90%);
  --surface2-light: hsl(var(--brand-hue) 20% 99%);
  --surface3-light: hsl(var(--brand-hue) 20% 92%);
  --surface4-light: hsl(var(--brand-hue) 20% 85%);
  --surface5-light: hsla(217, 70%, 26%, 1);

  --surface-shadow-light: var(--brand-hue) 10% 20%;
  --shadow-strength-light: .02;
  --border1-light: hsl(var(--brand-hue) 5% 80%);


  --brand-dark: hsl(var(--brand-hue) calc(var(--brand-saturation) / 0.2) calc(var(--brand-lightness) / 1.5));
  --text1-dark: hsl(var(--brand-hue) 15% 85%);
  --text2-dark: hsl(var(--brand-hue) 5% 65%);
  --surface1-dark: hsl(var(--brand-hue) 10% 10%);
  --surface2-dark: hsl(var(--brand-hue) 10% 15%);
  --surface3-dark: hsl(var(--brand-hue) 5% 20%);
  --surface4-dark: hsl(var(--brand-hue) 5% 25%);
  --surface5-dark: hsl(var(--brand-hue) 35% 25%);

  --surface-shadow-dark: var(--brand-hue) 50% 3%;
  --shadow-strength-dark: .8;
  --border1-dark: hsl(var(--brand-hue) 40% 70%);


  --link-hover-dark: hsla(45, 80%, 70%, 1);
  --cookie-accept-dark: hsla(120, 60%, 45%, 1);

}

:root {
  /* --- Hero --- */
  --f-hero-text: var(--text1-dark);
  --f-hero-header: var(--text1-dark);
  /* --- Background and Text --- */
  --f-background: var(--surface3-light);
  --f-text: var(--text1-light);
  --f-header: var(--text1-light);
  --f-header-items: (var(--text1-light));
  /*--- Navbar --- */
  --f-navbar-background: var(--surface4-light);
  --f-navbar-link: var(--link-color-light);
  --f-navbar-link-hover: var(--link-hover-light);
  /*--- Footer --- */
  --f-footer-background: var(--surface4-light);
  --f-footer-link-text: var(--link-color-light);
  /* --- Linki --- */
  --f-link-text: var(--link-color-light);
  --f-link-text-hover: var(--link-hover-light);
  /* Buttons Input */
  /*
  --btn-background: var(--link-color-light);
  --btn-text: var(--surface4-light); 
  --btn-background-hover: var(--surface4-light);
  --btn-text-hover: var(--link-color-light);
  */
  --btn-background: var(--link-color-light);
  /* var(--surface4-light); */
  --btn-text: var(--surface4-light);
  /* var(--link-color-light); */
  --btn-background-hover: var(--surface4-light);
  /* var(--link-color-light); */
  --btn-text-hover:  var(--link-color-light);
  /* var(--surface4-light); */

  --f-background-toast: var(--surface2-dark);

  --f-input-border: var(--surface4-light);
  --f-autocomplete-hover-bg: var(--surface3-dark);
  --f-autocomplete-hover-text: var(--text1-dark);
  /* --- Switchery --- */
  --f-background-switch: var(--surface4-light);

  --f-switcher-background: var(--link-color-light);
  --f-switcher-text: var(--surface4-light);
  --f-switcher-background-hover: var(--surface2-light);
  --f-switcher-text-hover: var(--f-link-text-hover);
  /* --- Cookie --- */
  --f-cookie-background: var(--surface2-light);
  --f-cookie-text: var(--text1-light);
  --f-cookie-accept-background: var(--link-color-light);
  --f-cookie-accept-text: var(--surface4-light);
  --f-cookie-reject-background: var(--surface4-light);
  --f-cookie-reject-text: var(--surface1-dark);
  /* --- Offers --- */
  --f-offers-border: var(--surface4-light);
  --f-offers-price: var(--brand-light);
  --f-offers-popular: var(--brand-light);
  --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
}

:root.dark {
  /* --- Hero --- */
  --f-hero-text: var(--text1-dark);
  --f-hero-header: var(--text1-dark);
  /* --- Background and Text --- */
  --f-background: var(--surface1-dark);
  --f-text: var(--text1-dark);
  --f-header: var(--text1-dark);
  --f-header-items: (var(--text1-dark));
  /*--- Navbar --- */
  --f-navbar-background: var(--surface2-dark);
  --f-navbar-link: var(--brand-dark);
  --f-navbar-link-hover: var(--link-hover-dark);
  /*--- Footer --- */
  --f-footer-background: var(--surface2-dark);
  --f-footer-link-text: var(--brand-dark);
  /* --- Linki --- */
  --f-link-text: var(--brand-dark);
  --f-link-text-hover: var(--link-hover-dark);
  /* Buttons Input */
  --btn-background: var(--f-link-text);
  --btn-text: var(--surface1-dark);
  --btn-background-hover: var(--surface4-dark);
  --btn-text-hover: var(--f-link-text-hover);

  --f-background-toast: var(--surface2-dark);

  --f-input-border: var(--surface4-dark);
  --f-autocomplete-hover-bg: var(--surface3-dark);
  --f-autocomplete-hover-text: var(--text1-dark);

  /* --- Switchery --- */
  --f-background-switch: var(--surface3-dark);

  --f-switcher-background: var(--f-link-text);
  --f-switcher-text: var(--surface1-dark);

  --f-switcher-background-hover: var(--surface4-dark);
  --f-switcher-text-hover: var(--f-link-text-hover);

  /* --- Cookie --- */
  --f-cookie-background: var(--surface4-dark);
  --f-cookie-text: var(--surface2-light);
  --f-cookie-accept-background: var(--f-link-text);
  --f-cookie-accept-text: var(--surface1-dark);
  --f-cookie-reject-background: var(--surface3-dark);
  --f-cookie-reject-text: var(--f-link-text);

  /* --- Offers --- */
  --f-offers-border: var(--surface4-dark);
  --f-offers-price: var(--brand-dark);
  --f-offers-popular: var(--brand-dark);
  --f-offers-popular-bg: color-mix(in srgb, var(--f-offers-popular) 22%, transparent);
}