/* TYPE SCALES
/* @link https://utopia.fyi/type/calculator?c=360,12,1.2,1240,16,1.25,6,3,415&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Step -3: 6.9444px → 8.192px */
  --step--3: clamp(0.434rem, 0.4021rem + 0.1418vw, 0.512rem);
  /* Step -2: 8.3333px → 10.24px */
  --step--2: clamp(0.5208rem, 0.4721rem + 0.2167vw, 0.64rem);
  /* Step -1: 10px → 12.8px */
  --step--1: clamp(0.625rem, 0.5534rem + 0.3182vw, 0.8rem);
  /* Step 0: 12px → 16px */
  --step-0: clamp(0.75rem, 0.6477rem + 0.4545vw, 1rem);
  /* Step 1: 14.4px → 20px */
  --step-1: clamp(0.9rem, 0.7568rem + 0.6364vw, 1.25rem);
  /* Step 2: 17.28px → 25px */
  --step-2: clamp(1.08rem, 0.8826rem + 0.8773vw, 1.5625rem);
  /* Step 3: 20.736px → 31.25px */
  --step-3: clamp(1.296rem, 1.0272rem + 1.1948vw, 1.9531rem);
  /* Step 4: 24.8832px → 39.0625px */
  --step-4: clamp(1.5552rem, 1.1927rem + 1.6113vw, 2.4414rem);
  /* Step 5: 29.8598px → 48.8281px */
  --step-5: clamp(1.8662rem, 1.3813rem + 2.1555vw, 3.0518rem);
  /* Step 6: 35.8318px → 61.0352px */
  --step-6: clamp(2.2395rem, 1.5951rem + 2.864vw, 3.8147rem);
}

/* SPACE SCALES
/* @link https://utopia.fyi/space/calculator?c=360,18,1.2,1240,20,1.25,5,2,768&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  /* Space 3xs: 5px → 5px */
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  /* Space 2xs: 9px → 10px */
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  /* Space xs: 14px → 15px */
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  /* Space s: 18px → 20px */
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  /* Space m: 27px → 30px */
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  /* Space l: 36px → 40px */
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  /* Space xl: 54px → 60px */
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  /* Space 2xl: 72px → 80px */
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  /* Space 3xl: 108px → 120px */
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  /* Space 3xs-2xs: 5px → 10px */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  /* Space 2xs-xs: 9px → 15px */
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  /* Space xs-s: 14px → 20px */
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  /* Space s-m: 18px → 30px */
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  /* Space m-l: 27px → 40px */
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  /* Space l-xl: 36px → 60px */
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  /* Space xl-2xl: 54px → 80px */
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  /* Space 2xl-3xl: 72px → 120px */
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  /* Space s-l: 18px → 40px */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
  /* Space s-xl: 18px → 60px */
  --space-s-xl: clamp(1.125rem, 0.0511rem + 4.7727vw, 3.75rem);
  /* Space s-2xl: 18px → 80px */
  --space-s-2xl: clamp(1.125rem, -0.4602rem + 7.0455vw, 5rem);
  /* Space m-l: 27px → 40px */
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  /* Space l-2xl: 36px → 80px */
  --space-l-2xl: clamp(2.25rem, 1.125rem + 5vw, 5rem);
}