/* My thinking here is that i'll just call different CSS for different pages, for now. 
Kinda hacky, but it will probably work. Theme.json will call different variables 
so I can really build in parallel here, but of course if I change variable names in one place, 
I'll have to change them here as well to maintain compatibility.
It should be an interesting experiment either way.  */

:root{
 
  
    /* primary palette */
  --color-base:           #ffffff; 
  --color-contrast:       #1a1a1a;
  --color-primary:        #d81853;
  --color-secondary:      #a0aec0;
  --color-tertiary:       #0785fb;
  --color-neutral:        #e4e4e4;

  /* helpers */
  --color-black:          #000;
  --color-white:          #fff;

  /* dark blues */
  --color-blue-dark:      #0B0C1E;
  --color-blue-dark-sat:  #000e30;


 
  /* spacing tokens */
  --space-x-small:  10px;
  --space-small:    15px;
  --space-medium:   20px;
  --space-large:    30px;
  --space-x-large:  40px;
 
 
  /* fluid‑type tokens */ 
  --size-20: clamp(15px, 2vw, 20px);
  --size-30: clamp(25px, 3vw, 30px);
  --size-40: clamp(30px, 4vw, 40px);
  --size-50: clamp(35px, 5vw, 50px);
  --size-60: clamp(40px, 6vw, 60px);
  --size-70: clamp(50px, 7vw, 70px);
  --size-80: clamp(60px, 8vw, 80px);

  
  --wp--style--global--content-size: 50rem;
  --wp--style--global--wide-size: 80rem; 
  
  --breakpoint-xs: "30rem"; /* 480px*/
  --breakpoint-sm: "38rem"; /*608px*/
  --breakpoint-md: "50rem"; /*800px*/
  --breakpoint-lg: "68rem"; /*1088px */
  --breakpoint-xl: "80rem"; /*1280px */
  --breakpoint-2xl: "90rem"; /*1440px */
  --breakpoint-3xl: "120rem"; /*1920px */ 

/* 
    --wp--style--global--wide-size: var(--breakpoint-xl);
    --wp--style--global--content-size: var(--breakpoint-md); */


    
  }