* {
  --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%, 25%, 1);

  --text1-light: hsla(200, 100%, 10%, 1);
  --text2-light: hsla(200, 30%, 30%, 1);
  --text3-light: hsla(200, 15%, 85%, 1);

  --surface1-light: hsla(200, 25%, 90%, 1);
  --surface2-light: hsla(200, 20%, 99%, 1);
  --surface3-light: hsla(200, 20%, 92%, 1);
  --surface4-light: hsla(200, 20%, 85%, 1);
  --surface5-light: hsla(217, 70%, 26%, 1);
  --surface6-light: hsla(200, 5%, 75%, 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: hsla(200, 15%, 85%, 1);
  --text2-dark: hsla(200, 5%, 65%, 1);
  --text3-dark: hsla(200, 5%, 100%, 1);

  --surface1-dark: hsla(200, 10%, 10%, 1);
  --surface2-dark: hsla(200, 10%, 15%, 1);
  --surface3-dark: hsla(200, 5%, 20%, 1);
  --surface4-dark: hsla(200, 5%, 25%, 1);
  --surface5-dark: hsla(200, 35%, 25%, 1);
  --surface6-dark: hsla(205, 51%, 41%, 1);


  --card-ring: hsla(217 91% 60% / 0.45);
  --card-shadow-deep: hsla(221 47% 11% / 0.18);

  --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);
  --f-navbar-height: 84px;

  /* Wyróznienie ceny */
  --f-addons-text: hsla(45, 100%, 92%, 1);
  --f-addons-background: hsla(165, 80%, 25%, 1);

}

:root {
  --f-hero-text: var(--text3-dark);
  --f-hero-header: var(--text3-dark);

  /* --- Background and Text --- */
  --f-background: var(--surface3-light);
  --f-text: var(--text2-light);
  --f-header: var(--text1-light);
  --f-header-items: (var(--text1-light));
  /*--- Navbar --- */
  --f-navbar-background: var(--surface6-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 {
  --f-hero-text: var(--text3-dark);
  --f-hero-header: var(--text3-dark);

  /* --- Background and Text --- */
  --f-background: var(--surface1-dark);
  --f-text: var(--text2-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);
}