@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

:root {

    /* color */
    --ua-purple : rgb(69, 22, 106);
    --ua-purple-mid : hsl(274, 55%, 36%);
    --ua-purple-light : hsl(272, 36%, 86%);
    --ua-gold : hsl(44, 87%, 50%);
    --ua-gold-mid: hsl(44, 85%, 69%);
    --ua-gold-light: hsl(45, 46%, 95%);

    /* light mode color defaults */
    --primary-text-color: hsl(250, 13%, 9%);
    --secondary-text-color: hsl(0, 0%, 60%);
    --mid-gray-color: hsl(0, 0%, 80%);
    --dark-gray-color: hsl(0, 0%, 27%);
    --darker-gray-color: hsl(0, 0%, 10%);
/*     --lightest-offset: hsl(50, 100%, 99%); */
    --lightest-offset:  hsl(0, 0%, 95%);
    --black-color: hsl(0, 0%, 13%);
    --white-color: hsl(0, 0%, 99%);

    --error-dark: hsl(354, 61%, 28%);
    --error-light: hsl(355, 70%, 91%);

    /* type and line-heights */
    --ua-basic-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --ua-line-height-body-sans: 150%;   
    --ua-line-height-caption-sans: 160%;   
    --ua-basic-serif:  Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
    --ua-basic-serif:  'Iowan Old Style', 'Palatino Linotype', 'URW Palladio L', P052, serif;
    --ua-basic-serif:  Optima, Candara, 'Noto Sans', source-sans-pro, sans-serif;    
    --ua-line-height-body-serif: 140%;  
    --ua-line-height-caption-serif: 160%;   
    --ua-brand-headline: 'Oswald', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --ua-line-height-headline: 105%;   
    --ua-brand-standout: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
    --ua-line-height-standout: 105%;   
 
  /* @link https://utopia.fyi/type/calculator?c=320,16,1.333,1240,20,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: 9.00px → 11.26px */
    --ua-type--2: clamp(0.56rem, calc(0.51rem + 0.25vw), 0.70rem);

    /* Step -1: 12.00px → 15.00px */
    --ua-type--1: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.94rem);

    /* Step 0: 16.00px → 20.00px */
    --ua-type-base: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);

    /* Step 1: 21.33px → 26.66px */
    --ua-type-1: clamp(1.33rem, calc(1.22rem + 0.58vw), 1.67rem);

    /* Step 2: 28.43px → 35.54px */
    --ua-type-2: clamp(1.78rem, calc(1.62rem + 0.77vw), 2.22rem);

    /* Step 3: 37.90px → 47.37px */
    --ua-type-3: clamp(2.37rem, calc(2.16rem + 1.03vw), 2.96rem);

    /* Step 4: 50.52px → 48.83px  */
    --ua-type-4: clamp(3.05rem, calc(3.19rem + -0.18vw), 3.16rem);

    /* Step 5: 67.34px → 49.77px */
    --ua-type-5: clamp(3.11rem, calc(4.59rem + -1.91vw), 4.21rem);



    --ua-type-5:  4.209rem;
    --ua-type-4: 3.157rem;
  
    --ua-type-3: 2.369rem;
  

    /* space */
    /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
    --ua-space-3xs: clamp(0.25rem, calc(0.23rem + 0.11vw), 0.31rem);
    --ua-space-2xs: clamp(0.50rem, calc(0.46rem + 0.22vw), 0.63rem);
    --ua-space-xs: clamp(0.75rem, calc(0.68rem + 0.33vw), 0.94rem);
    /* Space s: 16px → 20px */
    --ua-space-s: clamp(1.00rem, calc(0.91rem + 0.43vw), 1.25rem);
    --ua-space-m: clamp(1.50rem, calc(1.37rem + 0.65vw), 1.88rem);
    --ua-space-l: clamp(2.00rem, calc(1.83rem + 0.87vw), 2.50rem);
    --ua-space-xl: clamp(3.00rem, calc(2.74rem + 1.30vw), 3.75rem);
    --ua-space-2xl: clamp(4.00rem, calc(3.65rem + 1.74vw), 5.00rem);
    --ua-space-3xl: clamp(6.00rem, calc(5.48rem + 2.61vw), 7.50rem);

    /* One-up pairs */
    --ua-space-3xs-2xs: clamp(0.25rem, calc(0.12rem + 0.65vw), 0.63rem);
    --ua-space-2xs-xs: clamp(0.50rem, calc(0.35rem + 0.76vw), 0.94rem);
    --ua-space-xs-s: clamp(0.75rem, calc(0.58rem + 0.87vw), 1.25rem);
    /* Space s-m: 16px → 30px */
    --ua-space-s-m: clamp(1.00rem, calc(0.70rem + 1.52vw), 1.88rem);
    --ua-space-m-l: clamp(1.50rem, calc(1.15rem + 1.74vw), 2.50rem);
    --ua-space-l-xl: clamp(2.00rem, calc(1.39rem + 3.04vw), 3.75rem);
    --ua-space-xl-2xl: clamp(3.00rem, calc(2.30rem + 3.48vw), 5.00rem);
    --ua-space-2xl-3xl: clamp(4.00rem, calc(2.78rem + 6.09vw), 7.50rem);

    /* Custom pairs */
    /* Space s-l: 16px → 40px */
    --ua-space-s-l: clamp(1.00rem, calc(0.48rem + 2.61vw), 2.50rem);

}

@media (prefers-color-scheme: dark) {
    /* dark mode color defaults */

    :root {
    /*invert these*/
    --primary-text-color: hsl(250, 13%, 9%);
    --secondary-text-color: hsl(0, 0%, 60%);
    --mid-gray-color: hsl(0, 0%, 80%);
    --dark-gray-color: hsl(0, 0%, 27%);
    --darker-gray-color: hsl(0, 0%, 10%);
    --black-color: hsl(0, 0%, 0%);

    --error-dark: hsl(354, 61%, 28%);
    --error-light: hsl(355, 70%, 91%);
    }
}