:root {
  --clr-white: #ffffff;
  --clr-black: #000000;

  --clr-primary-5: #fde5e0;
  --clr-primary-10: #facac0;
  --clr-primary-20: #f8b0a1;
  --clr-primary-40: #f69581;
  --clr-primary-60: #f47b62;
  --clr-primary-80: #f16042;
  --clr-primary-100: #ef4623;
  --clr-primary-120: #bf381c;
  --clr-primary-140: #8f2a15;
  --clr-primary-160: #601c0e;
  --clr-primary-180: #300e07;

  --clr-neutral-5: #f5f5f5;
  --clr-neutral-10: #ebebeb;
  --clr-neutral-20: #e0e0e0;
  --clr-neutral-40: #c2c2c2;
  --clr-neutral-60: #999999;
  --clr-neutral-80: #8d8d8d;
  --clr-neutral-100: #666666;
  --clr-neutral-120: #585858;
  --clr-neutral-140: #444444;
  --clr-neutral-160: #333333;
  --clr-neutral-180: #212529;

  --clr-secondary-5: #fef2fe;
  --clr-secondary-10: #fce1fd;
  --clr-secondary-20: #fad0fc;
  --clr-secondary-40: #f8bffb;
  --clr-secondary-60: #f7aef8;
  --clr-secondary-80: #d778da;
  --clr-secondary-100: #a768aa;
  --clr-secondary-120: #7f4583;
  --clr-secondary-140: #56215d;
  --clr-secondary-160: #39163e;
  --clr-secondary-180: #1c0b1f;

  --clr-success-5: #eefffb;
  --clr-success-10: #ccfff2;
  --clr-success-20: #88fade;
  --clr-success-40: #44f5ca;
  --clr-success-60: #00f0b5;
  --clr-success-80: #00c393;
  --clr-success-100: #0ea88d;
  --clr-success-120: #158479;
  --clr-success-140: #1a5e63;

  --clr-alert-5: #fee8eb;
  --clr-alert-10: #fbbbc3;
  --clr-alert-20: #f88e9b;
  --clr-alert-40: #f56173;
  --clr-alert-60: #f2334a;
  --clr-alert-80: #d20018;
  --clr-alert-100: #ac2534;
  --clr-alert-120: #891e29;
  --clr-alert-140: #66171e;
  --clr-alert-160: #431013;
  --clr-alert-180: #200908;

  --clr-warning-5: #fffae2;
  --clr-warning-10: #fff5c5;
  --clr-warning-20: #fff0a8;
  --clr-warning-40: #ffeb8b;
  --clr-warning-60: #ffe66d;
  --clr-warning-80: #f8d423;
  --clr-warning-100: #ebcc38;
  --clr-warning-120: #d1b21d;
  --clr-warning-140: #766929;
  --clr-warning-160: #534a18;
  --clr-warning-180: #302b07;

  --clr-user-lime: #acf589;
  --clr-user-blue: #42cafd;
  --clr-user-periwinkle: #9381ff;
  --clr-user-pink: #ff7787;
  --clr-user-mauve: #c08f88;

  /* Primary font */
  --ff-primary: 'Open Sans', system-ui, sans-serif;

  --ff-logo: 'Sora', system-ui, sans-serif;

  /* Monospace font */
  --ff-mono: 'Inconsolata', serif;

  /* Font Awesome */
  --fa-style-family: 'FontAwesome6Pro';

  /* Font sizes */
  /* @link https://utopia.fyi/type/calculator?c=320,14,1.125,1440,14.22,1.125,9,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|l-2xl&g=s,l,xl,4 */
  /* Step -1: 12.4444px → 12.64px */
  --step--1: clamp(0.7778rem, 0.7743rem + 0.0175vi, 0.79rem);
  /* Step 0: 14px → 14.22px */
  --step-0: clamp(0.875rem, 0.8711rem + 0.0196vi, 0.8888rem);
  /* Step 1: 15.75px → 15.9975px */
  --step-1: clamp(0.9844rem, 0.98rem + 0.0221vi, 0.9998rem);
  /* Step 2: 17.7188px → 17.9972px */
  --step-2: clamp(1.1074rem, 1.1024rem + 0.0249vi, 1.1248rem);
  /* Step 3: 19.9336px → 20.2468px */
  --step-3: clamp(1.2458rem, 1.2403rem + 0.028vi, 1.2654rem);
  /* Step 4: 22.4253px → 22.7777px */
  --step-4: clamp(1.4016rem, 1.3953rem + 0.0315vi, 1.4236rem);
  /* Step 5: 25.2285px → 25.6249px */
  --step-5: clamp(1.5768rem, 1.5697rem + 0.0354vi, 1.6016rem);
  /* Step 6: 28.382px → 28.828px */
  --step-6: clamp(1.7739rem, 1.7659rem + 0.0398vi, 1.8018rem);
  /* Step 7: 31.9298px → 32.4315px */
  --step-7: clamp(1.9956rem, 1.9867rem + 0.0448vi, 2.027rem);
  /* Step 8: 35.921px → 36.4855px */
  --step-8: clamp(2.2451rem, 2.235rem + 0.0504vi, 2.2803rem);
  /* Step 9: 40.4111px → 41.0461px */
  --step-9: clamp(2.5257rem, 2.5144rem + 0.0567vi, 2.5654rem);

  /* Font-weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-bold: 600;
  --font-bolder: 700;

  /*Borders*/
  --border-radius: 0.5rem;
  --border-active: var(--clr-neutral-40);

  --card-border: 1px solid var(--clr-neutral-40);

  --box-shadow: 0px 0px 0px 2px var(--clr-primary-10);

  --shadow-dropdown: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

  /* Animations */
  --transition-translate-factor: 0.5;
  --transition-rotate-factor: -4deg;
  --transition-scale-factor: 0.05;
  --transition-skew-factor: -4deg;
  --transition-duration: 300ms;

  /*ANCHOR - Padding and Margins */
  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1440,24,1.333,4,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|l-2xl&g=s,l,xl,4 */

  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1440,24,1.333,4,1,&s=0.75|0.5|0.25,1.5|2|2.5|3|4|6,&g=s,l,xl,4 */

  /* Space 3xs: 4px → 6px */
  --space-3xs: clamp(0.25rem, 0.2143rem + 0.1786vi, 0.375rem);
  /* Space 2xs: 8px → 12px */
  --space-2xs: clamp(0.5rem, 0.4286rem + 0.3571vi, 0.75rem);
  /* Space xs: 12px → 18px */
  --space-xs: clamp(0.75rem, 0.6429rem + 0.5357vi, 1.125rem);
  /* Space s: 16px → 24px */
  --space-s: clamp(1rem, 0.8571rem + 0.7143vi, 1.5rem);
  /* Space m: 24px → 36px */
  --space-m: clamp(1.5rem, 1.2857rem + 1.0714vi, 2.25rem);
  /* Space l: 32px → 48px */
  --space-l: clamp(2rem, 1.7143rem + 1.4286vi, 3rem);
  /* Space xl: 40px → 60px */
  --space-xl: clamp(2.5rem, 2.1429rem + 1.7857vi, 3.75rem);
  /* Space 2xl: 48px → 72px */
  --space-2xl: clamp(3rem, 2.5714rem + 2.1429vi, 4.5rem);
  /* Space 3xl: 64px → 96px */
  --space-3xl: clamp(4rem, 3.4286rem + 2.8571vi, 6rem);
  /* Space 4xl: 96px → 144px */
  --space-4xl: clamp(6rem, 5.1429rem + 4.2857vi, 9rem);

  /* One-up pairs */
  /* Space 3xs-2xs: 4px → 12px */
  --space-3xs-2xs: clamp(0.25rem, 0.1071rem + 0.7143vi, 0.75rem);
  /* Space 2xs-xs: 8px → 18px */
  --space-2xs-xs: clamp(0.5rem, 0.3214rem + 0.8929vi, 1.125rem);
  /* Space xs-s: 12px → 24px */
  --space-xs-s: clamp(0.75rem, 0.5357rem + 1.0714vi, 1.5rem);
  /* Space s-m: 16px → 36px */
  --space-s-m: clamp(1rem, 0.6429rem + 1.7857vi, 2.25rem);
  /* Space m-l: 24px → 48px */
  --space-m-l: clamp(1.5rem, 1.0714rem + 2.1429vi, 3rem);
  /* Space l-xl: 32px → 60px */
  --space-l-xl: clamp(2rem, 1.5rem + 2.5vi, 3.75rem);
  /* Space xl-2xl: 40px → 72px */
  --space-xl-2xl: clamp(2.5rem, 1.9286rem + 2.8571vi, 4.5rem);
  /* Space 2xl-3xl: 48px → 96px */
  --space-2xl-3xl: clamp(3rem, 2.1429rem + 4.2857vi, 6rem);
  /* Space 3xl-4xl: 64px → 144px */
  --space-3xl-4xl: clamp(4rem, 2.5714rem + 7.1429vi, 9rem);

  --gap-sm: clamp(1rem, 3vmax, 1.5rem);
  --gap-md: clamp(1.5rem, 6vmax, 3rem);
  --gap-lg: clamp(3rem, 8vmax, 4rem);
  --gap-xl: clamp(6rem, 12vmax, 6rem);
  --gap-2xl: clamp(9rem, 15vmax, 8rem);

  /* Margins */
  --block-flow-sm: min(2rem, 4vh);
  --block-flow-md: min(4rem, 8vh);
  --block-flow-lg: min(8rem, 16vh);

  /*ANCHOR - Flex Properties */
  --cluster-outer: space-between;
  --cluster-inner: flex-start;

  /*SECTION - Relative Sizes */
  --one-rem: 1rem;
  --one-half-rem: 1.5rem;
  --two-rem: 2rem;
}