:root {
  color-scheme: light;
  --wp--style--global--content-size: 645px;
  --wp--style--global--wide-size: 1340px;
  --wp--style--root--padding-right: clamp(2rem, 3vw, 4rem);
  --wp--style--root--padding-left: clamp(2rem, 3vw, 4rem);

  --colorDark: #000000;
  --colorLight: #ffffff;
  --colorBrand_050: #f7fff4;
  --colorBrand_100: #ebffe3;
  --colorBrand_150: #c9e8be;
  --colorBrand_200: #d5e8cf;
  --colorBrand_300: #bdd5b4;
  --colorBrand_500: #51614c;
  --colorBrand_700: #31402c;
  --colorBrand_750: #2f3d2a;
  --colorBrand_800: #263122;
  --colorBrand_850: #1e271b;
  --colorBrand_900: #141a12;
  --colorBg: var(--colorLight);
  --colorText: var(--colorBrand_900);
  --colorSurface: var(--colorBrand_050);
  --colorSurfaceAlt: var(--colorBrand_100);
  --colorBorder: var(--colorBrand_200);
  --colorMuted: var(--colorBrand_500);
  --colorPrimary: var(--colorBrand_900);
  --colorPrimaryHover: var(--colorBrand_700);
  --colorOnPrimary: var(--colorLight);
  --colorOnPrimaryHover: var(--colorBrand_150);
  --colorLink: var(--colorPrimary);
  --colorHover: var(--colorPrimaryHover);
  --space2xs: clamp(0.3rem, 0.78vw, 0.5rem);
  --spaceXs:  clamp(0.5rem, 1.24vw, 0.8rem);
  --spaceS:   clamp(0.8rem, 1.71vw, 1.1rem);
  --spaceM:   clamp(1.1rem, 2.48vw, 1.6rem);
  --spaceL:   clamp(1.6rem, 4.03vw, 2.6rem);
  --spaceXl:  clamp(2rem, 6.20vw, 4rem);
  --space2xl: clamp(3rem, 9.30vw, 6rem);

  --sitePad: var(--spaceM);
  --btnBg: var(--colorPrimary);
  --btnColor: var(--colorOnPrimary);
  --btnBgHover: var(--colorPrimaryHover);
  --btnPad: var(--spaceXs) var(--spaceM);

  --fontMain: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --fontWeightLight: 300;
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemiBold: 600;
  --fontWeightBold: 700;
  --fontWeightBlack: 900;
  --fSizeMinimum: 1.4rem;
  --fSizeBase: clamp(1.6rem, 2.79vw, 1.8rem);
  --fSizeCard: clamp(1.4rem, 2vw, 1.6rem);
  --fSizeH1: clamp(3.6rem, 8.99vw, 5.8rem);
  --fSizeH2: clamp(3rem, 5.89vw, 3.8rem);
  --fSizeH3: clamp(2.4rem, 4.65vw, 3rem);
  --fSizeH4: clamp(2rem, 3.72vw, 2.4rem);
  --fSizeH5: clamp(1.8rem, 3.10vw, 2rem);
  --fSizeH6: clamp(1.6rem, 2.79vw, 1.8rem);
  --fSizeP:  var(--fSizeBase);
  --fSizeLi: var(--fSizeBase);

  --lineBase: 1.6;
  --lineH1: 1.05;
  --lineH2: 1.1;
  --lineH3: 1.15;
  --lineH4: 1.2;
  --lineH5: 1.25;
  --lineH6: 1.3;
  --lineP: 1.7;
  --lineLi: 1.6;

  --spaceH1: var(--spaceL);
  --spaceH2: var(--spaceM);
  --spaceH3: var(--spaceS);
  --spaceH4: var(--spaceS);
  --spaceH5: var(--spaceXs);
  --spaceH6: var(--spaceXs);
  --spaceP: var(--spaceM);
  --spaceLi: var(--space2xs);

  --transFast: 150ms ease;
  --transBase: 220ms ease;
  --transSlow: 350ms ease;

  --shadowSoft: 0 0.4rem 1.6rem rgb(0 0 0 / 0.08);
  --shadowHover: 0 0.8rem 2.4rem rgb(0 0 0 / 0.12);

  --radiusS: 0.4rem;
  --radiusM: 0.8rem;

}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --colorBg: var(--colorBrand_900);
    --colorText: var(--colorBrand_100);
    --colorSurface: var(--colorBrand_850);
    --colorSurfaceAlt: var(--colorBrand_800);
    --colorBorder: var(--colorBrand_500);
    --colorMuted: var(--colorBrand_300);
    --colorPrimary: var(--colorBrand_100);
    --colorPrimaryHover: var(--colorBrand_150);
    --colorOnPrimary: var(--colorBrand_900);
    --colorOnPrimaryHover: var(--colorBrand_700);
    --colorLink: var(--colorPrimary);
    --colorHover: var(--colorPrimaryHover);
    --shadowSoft: 0 0.4rem 1.6rem rgb(0 0 0 / 0.28);
    --shadowHover: 0 0.8rem 2.4rem rgb(0 0 0 / 0.36);
  }
}