@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300..700;1,300..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

@import url(base.css);

@import url(layout.css);

@import url(components/button.css);
@import url(components/list-card.css);
@import url(components/link-button.css);
@import url(components/option.css);
@import url(components/skill-chip.css);
@import url(components/project-card.css);


    
:root{

--font-base:"Inter", sans-serif;
--font-caption:"JetBrains Mono";
--font-quote:"Cormorant Garamond";

/* Colors */
--grey-100:hsla(240, 11%, 96%, 1);
--grey-200:hsla(240, 6%, 80%, 1) ;
--grey-300:hsla(240, 0%, 45%, 1);
--grey-400:hsla(240, 2%, 44%, 1);
--grey-700:hsla(0, 0%, 98%, 1);
--on-bg:hsla(240, 3%, 12%, 1);
--background-nav-mobile:hsla(0, 0%, 100%, 0.8);

/* Font size */
--font-size-title:clamp(2.5rem, 6vw, 8rem);
--font-size-h1:clamp(2rem, 5vw, 4rem);
--font-size-h2:clamp(1.5rem, 3.5vw, 2.5rem);
--font-size-h3:clamp(1rem, 2.5vw, 1.5rem);
--font-size-body:clamp(1rem, 2.5vw, 1.125rem);
--font-size-button:clamp(1rem, 2.5vw, 1.125rem);
--font-size-quote:clamp(1rem, 2.5vw, 2rem);
--font-size-caption:clamp(0.825rem, 1vw, 1rem);

/* Font weight */
--font-weight-title: 600;
--font-weight-h1: 600;
--font-weight-h2: 500;
--font-weight-h3: 500;
--font-weight-body: 400;
--font-weight-button: 600;
--font-weight-quote: 400;
--font-weight-caption: 300;

/* Spacing */
--spacing-xs:clamp(0.5rem, 1vw, 0.6rem);
--spacing-sm:clamp(0.75rem, 1.5vw, 1rem);
--spacing-md:clamp(1rem, 2vw, 1.5rem);
--spacing-lg:clamp(1.5rem, 3vw, 2.5rem); 
--spacing-xl:clamp(1.5rem, 5vw, 4rem) ;
--spacing-xxl:clamp(3rem, 8vw, 6rem) ;



}