@charset "utf-8";

:root {
  --theme-main-hue: 255;
  --theme-sub-hue: 265;
  --theme-accent-hue: 270;
  --h2-color: oklch(88% 0.04 var(--theme-sub-hue));
  --h3-color: oklch(92% 0.03 var(--theme-sub-hue));
  --menu-icon-current-color: #d02530;
  --icon--current-color: var(--menu-icon-current-color);

  &:has([data-system="sw2.0"]) {
    --header-chroma: 0.03;
    --menu-icon-bg-color: oklch(80% 0.02 var(--theme-menu-hue));
    --h2-color    : oklch(88% 0.02 var(--theme-sub-hue));
    --h3-color    : oklch(92% 0.01 var(--theme-sub-hue));
  }
}
@media screen {
  .night {
    --h2-color: oklch(40% 0.04 var(--theme-sub-hue));
    --h3-color: oklch(35% 0.03 var(--theme-sub-hue));
    &:has([data-system="sw2.0"]) {
      --menu-icon-bg-color: oklch(45% 0.02 var(--theme-menu-hue));
      --h2-color: oklch(40% 0.02 var(--theme-sub-hue));
      --h3-color: oklch(35% 0.01 var(--theme-sub-hue));
    }
  }
}
body {
  background-image: url(../../_common/img/back-pattern.png), url(../img/back-first.png);
  @media screen and (width <= 735px){
    background-size: auto, 80%;
  }
}