/* --------------------------------------------------

:::  Variables

-------------------------------------------------- */

:root {

/* --------------------------------------------------
  :::  FLUID TYPOGRAPHY SIZE CALCULATOR
  :::  @link https://utopia.fyi/type/calculator?c=330,18,1.414,1488,24,1.414,2,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
-------------------------------------------------- */

/* Step -2: 9.0027px → 12.0036px */
--step--2: clamp(0.5627rem, 0.5092rem + 0.2591vw, 0.7502rem);
/* Step -1: 12.7298px → 16.9731px */
--step--1: clamp(0.7956rem, 0.72rem + 0.3664vw, 1.0608rem);
/* Step 0: 18px → 24px */
--step-0: clamp(1.125rem, 1.0181rem + 0.5181vw, 1.5rem);
/* Step 1: 25.452px → 33.936px */
--step-1: clamp(1.5908rem, 1.4396rem + 0.7326vw, 2.121rem);
/* Step 2: 35.9891px → 47.9855px */
--step-2: clamp(2.2493rem, 2.0357rem + 1.036vw, 2.9991rem);


/* Measure refers to the length of a line of text. */
--measure: 66ch;
--measure-narrow: 45ch;
--measure-wide: 80ch;


/* Leading defines the distance from baseline to baseline and is determined by the css property line-height */
--leading-tight: 0.85;
--leading-solid: 1;
--leading-heading: 1.25;
--leading-copy: 1.5;
--leading-small: 1.35;
--leading-double: 2;


/* Tracking */
--tracked-copy: 0;
--tracked-heading: 0;
--tracked-topline: 0.1em;
--tracked-mono: 0;
--tracked-link: 0;
--tracked-button: 0.075em;
--tracked-menu: 0;
--tracked-logo: 0;


/* Font Weights */
--font-weight-copy: 400;
--font-weight-heading: 700;


/* Font Families */
--font-family-copy: 'vistasansot-reg', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-family-heading: 'vistasansot-bold', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--font-family-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;




--p-blank-line: calc(var(--leading-copy) * 1em);



/* --------------------------------------------------
  :::  FLUID SPACE SIZE CALCULATOR
  :::  @link https://utopia.fyi/space/calculator?c=330,18,1.618,1488,24,1.618,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
-------------------------------------------------- */

/* Space 3xs: 5px → 6px */
--space-3xs: clamp(0.3125rem, 0.2947rem + 0.0864vw, 0.375rem);
/* Space 2xs: 9px → 12px */
--space-2xs: clamp(0.5625rem, 0.5091rem + 0.2591vw, 0.75rem);
/* Space xs: 14px → 18px */
--space-xs: clamp(0.875rem, 0.8038rem + 0.3454vw, 1.125rem);
/* Space s: 18px → 24px */
--space-s: clamp(1.125rem, 1.0181rem + 0.5181vw, 1.5rem);
/* Space m: 27px → 36px */
--space-m: clamp(1.6875rem, 1.5272rem + 0.7772vw, 2.25rem);
/* Space l: 36px → 48px */
--space-l: clamp(2.25rem, 2.0363rem + 1.0363vw, 3rem);
/* Space xl: 54px → 72px */
--space-xl: clamp(3.375rem, 3.0544rem + 1.5544vw, 4.5rem);
/* Space 2xl: 72px → 96px */
--space-2xl: clamp(4.5rem, 4.0725rem + 2.0725vw, 6rem);
/* Space 3xl: 108px → 144px */
--space-3xl: clamp(6.75rem, 6.1088rem + 3.1088vw, 9rem);

/* One-up pairs */
/* Space 3xs-2xs: 5px → 12px */
--space-3xs-2xs: clamp(0.3125rem, 0.1878rem + 0.6045vw, 0.75rem);
/* Space 2xs-xs: 9px → 18px */
--space-2xs-xs: clamp(0.5625rem, 0.4022rem + 0.7772vw, 1.125rem);
/* Space xs-s: 14px → 24px */
--space-xs-s: clamp(0.875rem, 0.6969rem + 0.8636vw, 1.5rem);
/* Space s-m: 18px → 36px */
--space-s-m: clamp(1.125rem, 0.8044rem + 1.5544vw, 2.25rem);
/* Space m-l: 27px → 48px */
--space-m-l: clamp(1.6875rem, 1.3135rem + 1.8135vw, 3rem);
/* Space l-xl: 36px → 72px */
--space-l-xl: clamp(2.25rem, 1.6088rem + 3.1088vw, 4.5rem);
/* Space xl-2xl: 54px → 96px */
--space-xl-2xl: clamp(3.375rem, 2.6269rem + 3.6269vw, 6rem);
/* Space 2xl-3xl: 72px → 144px */
--space-2xl-3xl: clamp(4.5rem, 3.2176rem + 6.2176vw, 9rem);

/* Custom pairs */
/* Space s-l: 18px → 48px */
--space-s-l: clamp(1.125rem, 0.5907rem + 2.5907vw, 3rem);


/* --------------------------------------------------
  :::  FLUID GRID CALCULATOR
  ::: @link https://utopia.fyi/grid/calculator?c=330,18,1.618,1488,24,1.618,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12
-------------------------------------------------- */

--grid-max-width: 93rem;
--grid-gutter: var(--space-xs-s, clamp(1.125rem, 0.5907rem + 2.5907vw, 3rem));
--grid-columns: 12;




/* --------------------------------------------------
  :::  CLAMP CALCULATOR
  ::: @link @link https://utopia.fyi/clamp/calculator?a=314,1220,16—48
-------------------------------------------------- */

--fluid-16-48: clamp(1rem, 0.3068rem + 3.532vw, 3rem);




/* --------------------------------------------------
  :::  COLORS
-------------------------------------------------- */

--color-black: #000;
--color-dark: #2B2E34;
--color-white: #fff;
--color-light: #efefef;
--color-grey: #666666;
--color-red: #CC0000;
--color-blue: #183B5B;
--color-light-blue: #a6bde2;
--color-brown: #76635E;
--color-stone: #9BA097;
--color-light-stone: #F5F5F4;
--color-yellow: #EDCB49;
--color-success: #00ff62;
--color-warning: #fff200;
--color-error: #f13400;


--color-text: var(--color-dark);
--color-text-grey: var(--color-grey);
--color-text-negative: var(--color-light);
--color-heading: var(--color-black);
--color-heading-negative: var(--color-light);
--color-background: var(--color-white);
--color-background-light: var(--color-light);
--color-background-dark: var(--color-grey);

--color-primary: var(--color-red);
--color-secondary: var(--color-blue);

--color-logo: var(--color-black);
--color-navigation: var(--color-black);
--color-link: var(--color-blue);
--color-hover: var(--color-green);


/* --------------------------------------------------
  :::  RADIUS
-------------------------------------------------- */

--border-radius-3xs: var(--space-3xs);
--border-radius-2xs: var(--space-2xs);
--border-radius-xs: var(--space-xs);
--border-radius-s: var(--space-s);
--border-radius-m: var(--space-m);
--border-radius-l: var(--space-l);
--border-radius-xl: var(--space-xl);
--border-radius-xxl: var(--space-xxl);
--border-radius-3xl: var(--space-3xl);




}