/* VARIABLES */

:root {
  /* font sizes
	https://utopia.fyi/type/calculator?c=320,18,1.2,1040,20,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,m-xl&g=s,l,xl,12
	*/
  --size--1: clamp(0.94rem, calc(0.91rem + 0.14vw), 1rem);
  --size-0: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem);
  --size-1: clamp(1.35rem, calc(1.26rem + 0.47vw), 1.56rem);
  --size-2: clamp(1.62rem, calc(1.47rem + 0.74vw), 1.95rem);
  --size-3: clamp(1.94rem, calc(1.72rem + 1.11vw), 2.44rem);
  --size-4: clamp(2.33rem, calc(2.01rem + 1.6vw), 3.05rem);
  --size-5: clamp(2.8rem, calc(2.35rem + 2.26vw), 3.82rem);
  --size-6: clamp(3.36rem, calc(2.73rem + 3.13vw), 4.77rem);
  --size-7: clamp(4.03rem, calc(3.17rem + 4.29vw), 5.96rem);
  --size-8: clamp(4.84rem, calc(3.68rem + 5.81vw), 7.45rem);

  /* spaces
	https://utopia.fyi/space/calculator?c=320,18,1.2,1040,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,m-xl&g=s,l,xl,12
	*/
  --space-3xs: clamp(0.31rem, calc(0.31rem + 0vw), 0.31rem);
  --space-2xs: clamp(0.56rem, calc(0.53rem + 0.14vw), 0.63rem);
  --space-xs: clamp(0.88rem, calc(0.85rem + 0.14vw), 0.94rem);
  --space-s: clamp(1.13rem, calc(1.07rem + 0.28vw), 1.25rem);
  --space-m: clamp(1.69rem, calc(1.6rem + 0.42vw), 1.88rem);
  --space-l: clamp(2.25rem, calc(2.14rem + 0.56vw), 2.5rem);
  --space-xl: clamp(3.38rem, calc(3.21rem + 0.83vw), 3.75rem);
  --space-2xl: clamp(4.5rem, calc(4.28rem + 1.11vw), 5rem);
  --space-3xl: clamp(6.75rem, calc(6.42rem + 1.67vw), 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.31rem, calc(0.17rem + 0.69vw), 0.63rem);
  --space-2xs-xs: clamp(0.56rem, calc(0.4rem + 0.83vw), 0.94rem);
  --space-xs-s: clamp(0.88rem, calc(0.71rem + 0.83vw), 1.25rem);
  --space-s-m: clamp(1.13rem, calc(0.79rem + 1.67vw), 1.88rem);
  --space-m-l: clamp(1.69rem, calc(1.33rem + 1.81vw), 2.5rem);
  --space-l-xl: clamp(2.25rem, calc(1.58rem + 3.33vw), 3.75rem);
  --space-xl-2xl: clamp(3.38rem, calc(2.65rem + 3.61vw), 5rem);
  --space-2xl-3xl: clamp(4.5rem, calc(3.17rem + 6.67vw), 7.5rem);

  /* multi steps */
  --space-3xs-s: clamp(0.31rem, calc(-0.1rem + 2.08vw), 1.25rem);
  --space-2xs-s: clamp(0.56rem, calc(0.26rem + 1.53vw), 1.25rem);
  --space-2xs-m: clamp(0.56rem, calc(-0.02rem + 2.92vw), 1.88rem);
  --space-xs-m: clamp(0.88rem, calc(0.43rem + 2.22vw), 1.88rem);
  --space-xs-l: clamp(0.88rem, calc(0.15rem + 3.61vw), 2.5rem);
  --space-s-l: clamp(1.13rem, calc(0.51rem + 3.06vw), 2.5rem);
  --space-s-xl: clamp(1.13rem, calc(-0.04rem + 5.83vw), 3.75rem);
  --space-m-xl: clamp(1.69rem, calc(0.77rem + 4.58vw), 3.75rem);
  --space-l-2xl: clamp(2.25rem, calc(1.03rem + 6.11vw), 5rem);
  --space-l-3xl: clamp(2.25rem, calc(-0.08rem + 11.67vw), 7.5rem);

  /* colors */
  --color-dark: hsl(239, 57%, 15%);
  --color-grey: hsl(211, 12%, 35%);
  --color-light-grey: hsl(0, 0%, 94%);
  --color-blue: hsl(253, 98%, 41%);
  --color-dark-blue: hsl(218, 60%, 21%);
  --color-light-blue: hsl(194, 54%, 89%);
  --color-blend-blue: hsl(253, 100%, 32%);
  --color-soft-blue: hsl(210, 73%, 94%);
  --color-violet: hsl(248, 73%, 52%);
  --color-brique: hsl(358, 54%, 54%);
  --color-white: hsl(0, 0%, 100%);
  --color-light-white: hsl(240, 50%, 98%);
  --color-black: hsl(0, 0%, 0%);

  /* shadows */
  --shadow-color: 0deg 0% 80%;
  --shadow-elevation-medium: 0px 0.7px 0.7px hsl(var(--shadow-color) / 0.28),
    0px 1.5px 1.6px -0.7px hsl(var(--shadow-color) / 0.26),
    0px 2.9px 3px -1.5px hsl(var(--shadow-color) / 0.24),
    0px 6px 6.3px -2.2px hsl(var(--shadow-color) / 0.22),
    0px 11.8px 12.4px -3px hsl(var(--shadow-color) / 0.2);
  --shadow-elevation-high: 0px 0.5px 0.5px hsl(var(--shadow-color) / 0.18),
    0px 1.4px 1.5px -0.3px hsl(var(--shadow-color) / 0.18),
    0px 2.3px 2.4px -0.7px hsl(var(--shadow-color) / 0.17),
    0px 3.4px 3.6px -1px hsl(var(--shadow-color) / 0.16),
    0px 5.1px 5.4px -1.3px hsl(var(--shadow-color) / 0.16),
    0px 7.5px 7.9px -1.7px hsl(var(--shadow-color) / 0.15),
    0px 10.8px 11.3px -2px hsl(var(--shadow-color) / 0.15),
    -0.1px 15.4px 16.2px -2.3px hsl(var(--shadow-color) / 0.14),
    -0.1px 21.3px 22.4px -2.7px hsl(var(--shadow-color) / 0.13),
    -0.1px 28.9px 30.3px -3px hsl(var(--shadow-color) / 0.13);

  /* radius */
  --radius: 20px;
  --radius-small: 10px;

  /* grid */
  --content-width: 75rem;
  --grid-wrapper: [full-start] 1fr [wrapper-start]
    minmax(0, var(--content-width)) [wrapper-end] 1fr [full-end];
  --_content-padding: var(--content-padding, var(--space-s));
}