@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:GRAD,ROND,opsz,slnt,wdth,wght@0..100,0..100,6..144,-10..0,25..151,1..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Google+Sans+Flex:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');

:root {

  /* Button */
  --Button-Radius: 2px;
  --Sm-Button-Radius: 1px;
  --Lg-Button-Radius: 3px;
  --Button-Inner-Radius: 1px;
  --Sm-Button-Inner-Radius: 0px;
  --Lg-Button-Inner-Radius: 2px;
  --Button-Focus-Radius: 5px;
  --Sm-Button-Focus-Radius: 4px;
  --Lg-Button-Focus-Radius: 6px;
  --Button-Icon-Radius: 32px;
  --Sm-Button-Icon-Radius: 24px;
  --Lg-Button-Icon-Radius: 56px;
  --Button-Icon-Inner-Radius: 31px;
  --Sm-Button-Icon-Inner-Radius: 23px;
  --Lg-Button-Icon-Inner-Radius: 55px;
  --Button-Icon-Focus-Radius: 35px;
  --Sm-Button-Icon-Focus-Radius: 27px;
  --Lg-Button-Icon-Focus-Radius: 59px;
  --Button-Height: 32px;
  --Small-Button-Height: 24px;
  --Large-Button-Height: 56px;
  --Button-Min-Width: 60px;
  --Lg-Button-Min-Width: 100px;
  --Button-Bevel: 0;
  --Button-Bevel-Px: 0px;
  --Button-Bevel-Opacity: 0.5;
  /* Bevel geometry — the literal box-shadow numbers, same values the Figma
     Platform/Components collections carry (there as bare numbers, here as px).
     Small and large don't vary by platform, so they live here; medium's live
     in core.css beside the platform button heights they're derived from. */
  --Sm-Button-Highlight-Offset-x: 0px;
  --Sm-Button-Highlight-Offset-y: 0px;
  --Sm-Button-Highlight-Blur-Radius: 0px;
  --Sm-Button-Highlight-Spread: 0px;
  --Sm-Button-Lowlight-Offset-x: 0px;
  --Sm-Button-Lowlight-Offset-y: 0px;
  --Sm-Button-Lowlight-Blur-Radius: 0px;
  --Sm-Button-Lowlight-Spread: 0px;
  --Lg-Button-Highlight-Offset-x: 0px;
  --Lg-Button-Highlight-Offset-y: 0px;
  --Lg-Button-Highlight-Blur-Radius: 0px;
  --Lg-Button-Highlight-Spread: 0px;
  --Lg-Button-Lowlight-Offset-x: 0px;
  --Lg-Button-Lowlight-Offset-y: 0px;
  --Lg-Button-Lowlight-Blur-Radius: 0px;
  --Lg-Button-Lowlight-Spread: 0px;
  --Style-Border-Radius: var(--Button-Radius);

  /* Card */
  --Card-Radius: 18px;
  --Card-Inner-Radius: 17px;
  --Card-Focus-Radius: 21px;
  --Card-Padding: 16px;

  /* Modal */
  --Modal-Padding: 24px;
  --Modal-Radius: 24px;
  --Dropdown-Frame-Radius: 2px;
  --Modal-Inner-Radius: 23px;
  --Modal-Focus-Radius: 27px;

  /* Input */
  --Input-Radius: 2px;
  --Sm-Input-Radius: 1px;
  --Lg-Input-Radius: 3px;
  --Input-Inner-Radius: 1px;
  --Input-Focus-Radius: 5px;
  --Input-Swatch-Radius: 2px;
  --Sm-Input-Swatch-Radius: 1px;
  --Lg-Input-Swatch-Radius: 3px;

  /* Checkbox — per-size corner radius = 20% of the box (16/20/24px).
     Border is 2px (set in the lib component). */
  --Sm-Checkbox-Radius: 3.2px;
  --Checkbox-Radius: 4px;
  --Lg-Checkbox-Radius: 4.8px;
  --Style-Gradient-Color-1: var(--Buttons-Primary-Button);
  --Style-Gradient-Color-2: var(--Buttons-Primary-Button);
  --Style-Gradient-Angle: 0;

  --Sizing-Quarter: 2px;
  --Sizing-Half: 4px;
  --Sizing-1: 8px;
  --Sizing-1-and-Half: 12px;
  --Sizing-2: 16px;
  --Sizing-2-and-Half: 20px;
  --Sizing-3: 24px;
  --Sizing-4: 32px;
  --Sizing-5: 40px;
  --Sizing-6: 48px;
  --Sizing-7: 56px;
  --Sizing-8: 64px;
  --Sizing-9: 72px;
  --Sizing-10: 80px;
  --Sizing-11: 88px;
  --Sizing-12: 96px;
  --Sizing-13: 104px;
  --Sizing-14: 112px;
  --Sizing-15: 120px;
  --Sizing-16: 128px;
  --Sizing-20: 160px;
  --Sizing-30: 240px;
  --Sizing-Negative-Quarter: -2px;
  --Sizing-Negative-Half: -4px;
  --Sizing-Negative-1: -8px;
  --Sizing-Negative-1-and-Half: -12px;
  --Min-Stack-Gap: 0px;
}