// ^README: naming variables (primary, secondary, tertiary, quaternary, quinary, senary, septenary, octonary, nonary, and denary)

$breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

$border-color: #e8e8e8;
$border-radius: 0px;
$body-bg: white;
$border-width: 1px; // Add border width as necessary
$border-style: solid; // Add border style as necessary

$heading-font-family: "Montserrat", system-ui;
$heading-font-weight: 600;
$heading-color: #414042;
$heading-line-height: 1.3;
$heading-letter-spacing: normal;
$heading-case: normal;
$heading-margin-bottom: var(--ev-space-s);

$subtitle-color: #2e2e2e;
$subtitle-line-height: 1.3;
$subtitle-letter-spacing: normal;
$subtitle-case: normal;
$subtitle-margin-bottom: 1rem;

$utopia-url-step: url(https://utopia.fyi/type/calculator/?c=320,14,1.125,1900,16,1.2,10,1,1400-1200-992-768-576&s=0.75|0.5|0.25,1.5|2|3|4|6|8|10|14|18|24|30,s-l&g=s,m,3xl,12);
$step--2: clamp(0.6914rem, 0.6907rem + 0.0031vw, 0.6944rem);
$step--1: clamp(0.7778rem, 0.7665rem + 0.0563vw, 0.8333rem);
$step-0: clamp(0.875rem, 0.8497rem + 0.1266vw, 1rem);
$step-1: clamp(0.9844rem, 0.9407rem + 0.2184vw, 1.2rem);
$step-2: clamp(1.1074rem, 1.0401rem + 0.3368vw, 1.44rem);
$step-3: clamp(1.2458rem, 1.1482rem + 0.4883vw, 1.728rem);
$step-4: clamp(1.4016rem, 1.2655rem + 0.6805vw, 2.0736rem);
$step-5: clamp(1.5768rem, 1.3922rem + 0.9231vw, 2.4883rem);
$step-6: clamp(1.7739rem, 1.5284rem + 1.2275vw, 2.986rem);
$step-7: clamp(1.9956rem, 1.6741rem + 1.6077vw, 3.5832rem);
$step-8: clamp(2.2451rem, 1.8289rem + 2.0808vw, 4.2998rem);
$step-9: clamp(2.5257rem, 1.9922rem + 2.6674vw, 5.1598rem);
$step-10: clamp(2.8414rem, 2.1629rem + 3.3927vw, 6.1917rem);

$text-color: #555;
$text-font-family: "Montserrat", system-ui;
$text-font-weight: 400;
$text-line-height: 1.6;
$text-margin-bottom: 1rem;
$primary: #90bdd7;
$primary-rgb: 144, 189, 215;
$primary-hue: 202;
$primary-saturation: 52%;
$primary-lightness: 70%;

$secondary: #aad690;
$secondary-rgb: 170, 214, 144;
$secondary-hue: 90;
$secondary-saturation: 52%;
$secondary-lightness: 70%;

$tertiary: #d6b890;
$tertiary-rgb: 214, 184, 144;
$tertiary-hue: 30;
$tertiary-saturation: 52%;
$tertiary-lightness: 70%;

$quaternary: #d590d6;
$quaternary-rgb: 213, 144, 214;
$quaternary-hue: 300;
$quaternary-saturation: 52%;
$quaternary-lightness: 70%;

$senary: #677881;
$senary-rgb: 103, 120, 129;
$senary-hue: 200;
$senary-saturation: 12%;
$senary-lightness: 45%;

$light: #f8f9fa;
$light-rgb: 248, 249, 250;
$light-hue: 210;
$light-saturation: 17%;
$light-lightness: 97%;

$dark: #343434;
$dark-rgb: 52, 52, 52;
$dark-hue: 0;
$dark-saturation: 0%;
$dark-lightness: 20%;

$info: #17a2b8;
$info-rgb: 23, 162, 184;
$info-hue: 189;
$info-saturation: 77%;
$info-lightness: 41%;

$success: #28a745;
$success-rgb: 40, 167, 69;
$success-hue: 134;
$success-saturation: 61%;
$success-lightness: 41%;

$warning: #ffc107;
$warning-rgb: 255, 193, 7;
$warning-hue: 45;
$warning-saturation: 100%;
$warning-lightness: 51%;

$danger: #dc3545;
$danger-rgb: 220, 53, 69;
$danger-hue: 354;
$danger-saturation: 70%;
$danger-lightness: 54%;

$btn-font-weight: 700;
$btn-padding-x: var(--ev-space-s-m);
$btn-padding-y: var(--ev-space-2xs);
$btn-font-size: $step-0;
$btn-line-height: $text-line-height;
$btn-font-family: $text-font-family;
$btn-border-width: $border-width;
$btn-border-radius: $border-radius;
$btn-letter-spacing: normal;
$btn-case: normal;

$utopia-url-space: url(https://utopia.fyi/space/calculator?c=320,14,1.125,1900,16,1.125,7,1,1400-1200-992-768-576&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6%7C8%7C10%7C14%7C18%7C24%7C30,s-l&g=s,m,3xl,12);
$space-3xs: clamp(0.25rem, 0.25rem + 0vw, 0.25rem);
$space-2xs: clamp(0.4375rem, 0.4248rem + 0.0633vw, 0.5rem);
$space-xs: clamp(0.6875rem, 0.6748rem + 0.0633vw, 0.75rem);
$space-s: clamp(0.875rem, 0.8497rem + 0.1266vw, 1rem);
$space-m: clamp(1.3125rem, 1.2745rem + 0.1899vw, 1.5rem);
$space-l: clamp(1.75rem, 1.6994rem + 0.2532vw, 2rem);
$space-xl: clamp(2.625rem, 2.5491rem + 0.3797vw, 3rem);
$space-2xl: clamp(3.5rem, 3.3987rem + 0.5063vw, 4rem);
$space-3xl: clamp(5.25rem, 5.0981rem + 0.7595vw, 6rem);
$space-4xl: clamp(7rem, 6.7975rem + 1.0127vw, 8rem);
$space-5xl: clamp(8.75rem, 8.4968rem + 1.2658vw, 10rem);
$space-6xl: clamp(12.25rem, 11.8956rem + 1.7722vw, 14rem);
$space-7xl: clamp(15.75rem, 15.2943rem + 2.2785vw, 18rem);
$space-8xl: clamp(21rem, 20.3924rem + 3.038vw, 24rem);
$space-9xl: clamp(26.25rem, 25.4905rem + 3.7975vw, 30rem);

$space-3xs-2xs: clamp(0.25rem, 0.1994rem + 0.2532vw, 0.5rem);
$space-2xs-xs: clamp(0.4375rem, 0.3742rem + 0.3165vw, 0.75rem);
$space-xs-s: clamp(0.6875rem, 0.6242rem + 0.3165vw, 1rem);
$space-s-m: clamp(0.875rem, 0.7484rem + 0.6329vw, 1.5rem);
$space-m-l: clamp(1.3125rem, 1.1733rem + 0.6962vw, 2rem);
$space-l-xl: clamp(1.75rem, 1.4968rem + 1.2658vw, 3rem);
$space-xl-2xl: clamp(2.625rem, 2.3465rem + 1.3924vw, 4rem);
$space-2xl-3xl: clamp(3.5rem, 2.9937rem + 2.5316vw, 6rem);
$space-3xl-4xl: clamp(5.25rem, 4.693rem + 2.7848vw, 8rem);
$space-4xl-5xl: clamp(7rem, 6.3924rem + 3.038vw, 10rem);
$space-5xl-6xl: clamp(8.75rem, 7.6867rem + 5.3165vw, 14rem);
$space-6xl-7xl: clamp(12.25rem, 11.0854rem + 5.8228vw, 18rem);
$space-7xl-8xl: clamp(15.75rem, 14.0791rem + 8.3544vw, 24rem);
$space-8xl-9xl: clamp(21rem, 19.1772rem + 9.1139vw, 30rem);
$space-s-l: clamp(0.875rem, 0.6472rem + 1.1392vw, 2rem);

$shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.075);
$shadow-md: 0 2px 8px rgba(0, 0, 0, 0.075);
$shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.075);

$transition-fast: 0.2s;
$transition-normal: 0.5s;
$transition-slow: 0.8s;

$utopia-url-grid: url(https://utopia.fyi/grid/calculator?c=320,14,1.125,1900,16,1.125,7,1,1400-1200-992-768-576&s=0.75|0.5|0.25,1.5|2|3|4|6|8|10|14|18|24|30,s-l&g=s,m,3xl,12);
$grid-min-width: 20rem;
$grid-max-width: 91.5rem;
$grid-preferred-width: 80%;
$grid-gutter: var(
  --ev-space-m-m,
  clamp(0.875rem, 0.7002rem + 0.8741vw, 1.5rem)
);
$grid-columns: 12;
