/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/

:root {
	/* 主色调 */
	--color-primary-h: 211;
	--color-primary-s: 85%;
	--color-primary-l: 32%;
	--color-primary: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l));
	--color-primary-hover: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) / 0.85);
	--color-primary-light: hsl(var(--color-primary-h) var(--color-primary-s) var(--color-primary-l) / 0.2);

	/* 强调色 */
	--color-action-h: 102;
	--color-action-s: 50%;
	--color-action-l: 44%;
	--color-action: hsl(var(--color-action-h) var(--color-action-s) var(--color-action-l));
	--color-action-hover: hsl(var(--color-action-h) var(--color-action-s) var(--color-action-l) / 0.85);
	--color-action-light: hsl(var(--color-action-h) var(--color-action-s) var(--color-action-l) / 0.2);

	/* 字体色 */
	--color-base-h: 210;
	--color-base-s: 10%;
	--color-base-l: 23%;
	--color-base: hsl(var(--color-base-h) var(--color-base-s) var(--color-base-l));
	--color-base-hover: hsl(var(--color-base-h) var(--color-base-s) var(--color-base-l) / 0.85);
	--color-base-light: hsl(var(--color-base-h) var(--color-base-s) var(--color-base-l) / 0.2);

	/* 底色 - 浅灰色 #CF0FC */
	--color-muted-h: 240;
	--color-muted-s: 3%;
	--color-muted-l: 94%;
	--color-muted-hsl: var(--color-muted-h) var(--color-muted-s) var(--color-muted-l);
	--color-muted: hsl(var(--color-muted-hsl));
	--color-muted-light: hsl(var(--color-muted-h) var(--color-muted-s) var(--color-muted-l) / 0.5);

	/* radius */
	--button-radius: 1rem; 
	--card-radius: 1.5rem; 

	/* padding */
	--section-block-padding: clamp(5rem, calc(5rem + (1vw - 0.32rem) * 4.7801), 10rem);
	--section-inline-padding: clamp(2.4rem, calc(2.4rem + (1vw - 0.32rem) * 3.4417), 6rem);
	--card-padding: clamp(2rem, calc(0.956vw + 1.694rem), 3rem);

	/* gap */
	--content-gap: clamp(1.6rem, calc(0.382vw + 1.478rem), 2rem);
	--container-gap: clamp(4rem, 1.912vw + 3.388rem, 6rem);


	/* spacing */
	--space-m: clamp(2rem, calc(1.147vw + 1.633rem), 3.2rem);
	--space-s: clamp(1.5rem, 0.956vw + 1.194rem, 2.5rem);
	--space-xs: clamp(0.94rem, 0.72vi + 0.76rem, 1.33rem);

	/* font size */
	--text-xs: clamp(1.02rem, 0.06vi + 1rem, 1.07rem);
	--text-s: clamp(1.28rem, 0.18vi + 1.19rem, 1.43rem);
	--text-m: clamp(1.6rem, 0.37vi + 1.42rem, 1.9rem);
	--text-l: clamp(2rem, 0.66vi + 1.68rem, 2.53rem);
	--text-xl: clamp(2.5rem, 1.09vi + 1.98rem, 3.38rem);

	/* heading */
	--h-6: clamp(0.84rem, -0.06vi + 0.86rem, 0.81rem);
	--h-5: clamp(1.05rem, 0.06vi + 1.03rem, 1.08rem);
	--h-4: clamp(1.31rem, 0.25vi + 1.24rem, 1.44rem);
	--h-3: clamp(1.64rem, 0.55vi + 1.48rem, 1.92rem);
	--h-2: clamp(2.05rem, 1vi + 1.75rem, 2.55rem);
	--h-1: clamp(2.56rem, 1.68vi + 2.06rem, 3.4rem);

	/* grid */
	--grid-2: repeat(2, minmax(0, 1fr)); 
	--grid-1: repeat(1, minmax(0, 1fr)); 
	--grid-3: repeat(3, minmax(0, 1fr));
	--grid-4: repeat(4, minmax(0, 1fr)); 
}