@import url("../css/cntnr.css");
@import url("../css/woo.css");

:root {
  /*== FONT-SIZES ==*/
  --font-size__smallest: clamp(0.375rem, 0.212rem + 0.543vw, 0.688rem);
  --font-size__x-small: clamp(0.563rem, 0.432rem + 0.434vw, 0.813rem);
  --font-size__small: clamp(0.875rem, 0.81rem + 0.217vw, 1rem);
  --font-size__small-reg:  clamp(0.8rem, 0.8rem + ((1vw - 0.2rem) * 0.767), 1rem);
  --font-size__regular: clamp(1.188rem, 1.025rem + 0.543vw, 1.5rem);
  --font-size__medium: clamp(1.25rem, 0.99rem + 0.869vw, 1.75rem);
  --font-size__medium-large: clamp(1.375rem, 0.92rem + 1.52vw, 2.25rem);
  --font-size__large: clamp(2rem, 0.7rem + 4.343vw, 4.5rem);
  --font-size__x-large: clamp(2.5rem, 0.42rem + 6.949vw, 6.5rem);

  --font-weight__light: 300;
  --font-weight__regular: 400;
  --font-weight__bold: 600;

  --grid-inner-small: 5px 20px 5px 20px;
  --border-width-keyvisual: clamp(1.25rem, 0.182rem + 3.568vw, 3.75rem);
  
  /*== GRIDS ==*/
  --grid__large: clamp(2.5rem, -1.071rem + 11.429vw, 7.5rem);
  --grid__medium: clamp(1.25rem, -1.429rem + 8.571vw, 5rem);
  --grid__small: clamp(0.625rem, -0.714rem + 4.286vw, 2.5rem);
  --grid__x-small: clamp(0.625rem, 0.179rem + 1.429vw, 1.25rem);

  /*== COLORS ==*/
  --brand-color-main: #ee7100;
  --brand-color-main-subtile: #9ae8d944;
  --main-dark: #1e1e1e;
  --main-medium: #eeeeee;
  --main-light: #f2f2f2;
  --main-lightest: #f9f9f966;
  --main-white: #fbfbfb;
  --main-dark-subtile: #1e1e1edd;
  --main-light-subtile: #f2f2f2dd;
  --main-dark-grad:linear-gradient(30deg,var(--main-dark) 0%,var(--main-dark-trans) 100%);
  --main-light-grad:linear-gradient(30deg,var(--main-light) 0%,var(--main-light-trans) 100%);
  --color-accept: #2DC460;
  --color-decline: #C45D2D;
}

html {
    background-image: 
      linear-gradient(var(--bckgrnd-overlay-dark), var(--bckgrnd-overlay-dark)),
      url("/wp-content/uploads/2025/12/composyst_CONTENT__WEB_0036.png");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    /*background-blend-mode: overlay;*/
  }

body.oxygen {
  width: 100vw;
  min-height: 100vh;
  background: transparent;
}

main {
  width: 100vw;
  min-height: 100vh;
  background: transparent;
}