/**
 * Millco Base CSS.
 * and definitions.
 */

:root {

  --theme: #8D69C7;
  --pink: #EA79A9;
  --pink-alpha: hsla(336, 72%, 67%, 0.5);
  
  --accent: #EA79A9;

  --brand-pink-30: #EA79A9;
  --brand-pink-50: #C4457C;


  --dark: hsl(0, 0%, 5%);
  --dark-grey: #141414;
  --grey-mid: hsl(0, 0%, 25%);
  --grey-light: hsl(0, 0%, 50%);

  --neutral-black: #000;
  --neutral-grey-10: #ADB9CC;
  --neutral-grey-30: #31363D;
  --neutral-grey-5: #CED5E0;
  --neutral-white: #FFF;

  --grey-very-light: #EBEBEB;
  --pale: #FDF2E9;
  --black: #000;
  --white: #ffffff;

  --purple: #B190E6;
  --purple-dark: #8D69C7;
  --violet: #B190E6;

  --warning-yellow-30: #E5C63C;
  
  --transition: all 0.3s ease-in-out;

  --text-light: 200;
  --text-regular: 800;
  --strong: 800;
  --heavy: 800;

  --shadow: 0px 16px 20px 0px rgba(0, 0, 0, 0.50);

  --header-height: 80px;

  --heading-font: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;
  ;

  --font-sans: 'Plus Jakarta Sans', system, -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
  ;

  --font-serif: Constantia, "Lucida Bright", Lucidabright, "Lucida Serif", Lucida, "DejaVu Serif", "Bitstream Vera Serif", "Liberation Serif", Georgia, serif;

  --font-condensed: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", sans-serif;

/*=============================
 Fluid Type sizes from
 https://utopia.fyi/
=============================*/

  /* @link https://utopia.fyi/type/calculator?c=320,16,1.333,1240,24,1.333,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --step--2: clamp(0.56rem, 0.46rem + 0.49vw, 0.84rem);
  --step--1: clamp(0.75rem, 0.62rem + 0.65vw, 1.13rem);
  --step-0: clamp(0.875rem, 0.83rem + 0.87vw, 1.10rem);
  --step-05: clamp(1.00rem, 1rem + 1.0vw, 1.75rem);
  --step-1: clamp(1.33rem, 1.10rem + 1.16vw, 2.00rem);
  --step-2: clamp(1.78rem, 1.47rem + 1.55vw, 2.67rem);
  --step-3: clamp(2.37rem, 1.96rem + 2.06vw, 3.55rem);
  --step-4: clamp(3.16rem, 2.61rem + 2.75vw, 4.74rem);
  --step-5: clamp(4.21rem, 3.48rem + 3.66vw, 6.31rem);


/* Current (v5.0) Boostrap breakpoints are 
X-Small 	None 	<576px
Small 	sm 	≥576px
Medium 	md 	≥768px
Large 	lg 	≥992px
Extra large 	xl 	≥1200px
Extra extra large 	xxl 	≥1400px
*/

--max-width: 1440px;

--Cards-Layout-Large-Card-corner-radius: 8px;

--Typography-size-sm: 18px;
--Typography-size-md: 24px;
--Typography-size-3xl: 60px;
--Typography-weight-Bold: 700;
--Typography-weight-ExtraBold: 800;
--Typography-line-height-sm: 24px; /* 133.333% */
--Typography-line-height-md: 32px; /* 133.333% */
--Typography-line-height-3xl: 60px; /* 106.667% */


--Layout-Gutter: 32px;
--Layout-Margin: 24px;
--Layout-Vertical-gap: 56px;
--Layout-Heading-size: var(--Typography-size-md, 24px);
--Layout-Heading-weight: var(--Typography-weight-ExtraBold, 800);
--Layout-Heading-line-height: var(--Typography-line-height-md, 32px); /* 133.333% */

--gap: 0.75rem;
--gap-small: 0.5rem;
--container-width: 1392px;
}

@media (min-width: 768px) {
  :root {
    --gap: 1rem;
    --gap-small: 0.75rem;
  }
}

@media (min-width: 992px) {
  :root {
    --gap: 2rem;
    --gap-small: 1rem;
  }
}