:root {
  color-scheme: light;
  --wp--style--global--content-size: 70rem;
  --wp--style--global--wide-size: 192rem;
  --wp--style--root--padding-right: clamp(2rem, 6.77vw, 13rem);
  --wp--style--root--padding-left: clamp(2rem, 6.77vw, 13rem);

  /* Primitives */
  --colorBlack: #000000;
  --colorInk:     #131a20;
  --colorLinen:   #e6e5e3;
  --colorPaper:   #eeedeb;
  --colorStone:   #d9d8d6;
  --colorBronze:  #a18556;

  /* Primitives — legacy, superseded by the palette above (kept for reference until the design review pass) */
  --colorCream:       #FFFFF3;
  --colorGreige:      #F5F1EE;
  --colorGreige_200:  #EAE5DF;
  --colorGreige_300:  #D8D1C8;
  --colorGreige_500:  #A89F95;
  --colorDark_700:    #4A4039;
  --colorDark_900:    #2A2420;
  --colorDark_950:    #1C1814;
  --colorBlue:        #0B5AFF;
  --colorBlueLight:   #5B85FF;
  --colorStroke:      #CAA87F;
  --colorLabel:       #AD8046;

  /* Semantic */
  --colorLight:           var(--colorPaper);
  --colorBg:              var(--colorPaper);
  --colorText:            var(--colorInk);
  --colorSurface:         var(--colorLinen);
  --colorSurfaceAlt:      var(--colorStone);
  --colorBorder:          var(--colorStone);
  --colorMuted:           var(--colorDark_900);
  --colorPrimary:         var(--colorInk);
  --colorPrimaryHover:    color-mix(in srgb, var(--colorInk) 85%, white);
  --colorOnPrimary:       var(--colorPaper);
  --colorOnPrimaryHover:  var(--colorLinen);
  --colorHover:           var(--colorPrimaryHover);
  --colorLink:            var(--colorText);
  --space2xs: clamp(0.3rem, 0.78vw, 0.5rem);
  --spaceXs:  clamp(0.5rem, 1.24vw, 0.8rem);
  --spaceS:   clamp(1.8rem, 1.04vw, 2rem);
  --spaceM:   clamp(2rem, 1.35vw, 2.6rem);
  --spaceL:   clamp(5rem, 3.65vw, 7rem);
  --spaceXl:  clamp(3rem, 5.47vw, 10.5rem);
  --space2xl: clamp(4rem, 6.77vw, 13rem);
  --gutterCommon: var(--spaceM);

  --sitePad: var(--wp--style--root--padding-right);
  --btnBg: var(--colorPrimary);
  --btnColor: var(--colorOnPrimary);
  --btnBgHover: var(--colorPrimaryHover);
  --btnPad: var(--spaceXs) var(--spaceM);
  --uiHeight: clamp(4rem, 2.60vw, 5rem);
  --headerPad: calc( var(--spaceXl) + var(--uiHeight) +  var(--space2xl) );

  --fontMain: Figtree, Helvetica, Arial, sans-serif;
  --fontDisplay: Garamond, Georgia, "Times new roman", serif;
  --fontSecondary: var(--fontMain);
  --fontWeightLight: 300;
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemiBold: 600;
  --fontWeightBold: 700;
  --fontWeightBlack: 900;
  --fSizeMinimum: 1.5rem;
  --fSizeBase: clamp(1.6rem, 1.25vw, 2.4rem);
  --fSizeCard: clamp(1.6rem, 1.25vw, 2.4rem);
  --fSizeH1Hero: clamp(4rem, 5.00vw, 9.6rem);
  --fSizeH1: clamp(3.6rem, 4.38vw, 8.4rem);
  --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.5rem, 0.94vw, 1.8rem);
  --fSizeP:  var(--fSizeBase);
  --fSizeLi: var(--fSizeBase);

  --lineBase: 1.42;
  --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: clamp(3rem, 3.65vw, 7rem);
  --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;

  --cols: 1;
  --colMin: 15rem;
  --menu-cols: 4;

}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --colorBg:              var(--colorInk);
    --colorText:            var(--colorPaper);
    --colorSurface:         #242018;
    --colorSurfaceAlt:      #2E2820;
    --colorBorder:          #3D3730;
    --colorMuted:           color-mix(in srgb, var(--colorPaper) 45%, var(--colorInk));
    --colorPrimary:         var(--colorPaper);
    --colorPrimaryHover:    var(--colorLinen);
    --colorOnPrimary:       var(--colorInk);
    --colorOnPrimaryHover:  var(--colorInk);
    --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);
  }
}