@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Geist_Mono/GeistMono-VariableFont_wght.ttf') format('truetype');
}

@font-face {
  font-family: 'Geist Mono';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/Geist_Mono/GeistMono-Italic-VariableFont_wght.ttf') format('truetype');
}

:root {

  --color-black:                  #060607;

  --color-black-subdued:          #0e0e0e;
  --color-sand:                   #FDFBF7;
  --color-sand-rgb:               253, 251, 247;
  --color-white:                  var(--color-sand);
  --color-pink:                   #ffb1cd;
  --color-hero-pill-bg:           #dfb4c2;
  --color-content-subdued-dark:   #999999;
  --color-content-subdued-light:  #6b6a6a;
  --color-border-dark:            #292929;


  --font-paralucent:   'paralucent', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-graphik:      'Graphik', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-geist-mono:   'Geist Mono', 'Courier New', Courier, monospace;




  --type-overline-family:         var(--font-geist-mono);
  --type-overline-size:           12px;
  --type-overline-weight:         700;
  --type-overline-line-height:    1.4;
  --type-overline-letter-spacing: 0.06em;


  --type-h1-family:               var(--font-paralucent);
  --type-h1-size:                 90px;
  --type-h1-weight:               300;
  --type-h1-line-height:          80px;
  --type-h1-letter-spacing:       -0.01em;


  --type-h3-family:               var(--font-paralucent);
  --type-h3-size:                 50px;
  --type-h3-weight:               500;
  --type-h3-line-height:          35.556px;
  --type-h3-letter-spacing:       -0.01em;


  --type-h4-family:               var(--font-graphik);
  --type-h4-size:                 38px;
  --type-h4-weight:               400;
  --type-h4-line-height:          normal;
  --type-h4-letter-spacing:       -0.02em;


  --type-h5-family:               var(--font-paralucent);
  --type-h5-size:                 28px;
  --type-h5-weight:               500;
  --type-h5-line-height:          normal;
  --type-h5-letter-spacing:       -0.005em;


  --type-h5g-family:              var(--font-graphik);
  --type-h5g-size:                28px;
  --type-h5g-weight:              400;
  --type-h5g-line-height:         normal;
  --type-h5g-letter-spacing:      -0.005em;


  --type-h6-family:               var(--font-graphik);
  --type-h6-size:                 21px;
  --type-h6-weight:               500;
  --type-h6-line-height:          normal;
  --type-h6-letter-spacing:       -0.02em;


  --type-body-family:             var(--font-graphik);
  --type-body-size:               16px;
  --type-body-weight:             400;
  --type-body-line-height:        1.4;
  --type-body-letter-spacing:     -0.01em;


  --type-small-family:            var(--font-graphik);
  --type-small-size:              11px;
  --type-small-weight:            500;
  --type-small-line-height:       1;
  --type-small-letter-spacing:    0;



  --spacing-0:          0px;
  --spacing-2xs:        4px;
  --spacing-xs:         8px;
  --spacing-sm:         12px;
  --spacing-md:         16px;
  --spacing-lg:         20px;
  --spacing-xl:         24px;
  --spacing-2xl:        32px;
  --spacing-3xl:        48px;
  --spacing-4xl:        64px;
  --spacing-5xl:        80px;
  --spacing-6xl:        104px;
  --spacing-7xl:        120px;
  --spacing-2-5xl:      40px;
  --spacing-3-5xl:      60px;
  --spacing-4-5xl:      88px;
  --spacing-30:         30px;
  --spacing-nav-dot-gap: 3.5px;
  --layout-header-mobile-height: 89px;


  --spacing-section-md: var(--spacing-5xl);
  --spacing-section-lg: var(--spacing-6xl);
  --spacing-section-xl: var(--spacing-7xl);


  --section-padding-y: var(--spacing-section-xl);


  --case-card-desc-max-width: 360px;


  --radius-24:   24px;
  --radius-48:   48px;
  --radius-pill: 300px;

  --radius-media: 24px;
}

@media (max-width: 1199px) {
  :root {
    --radius-media: 16px;
    --section-padding-y: var(--spacing-section-lg);
  }
}

@media (max-width: 767px) {
  :root {
    --radius-media: 12px;
    --section-padding-y: var(--spacing-section-md);


    --type-h1-size:        70px;
    --type-h1-line-height: 60px;


    --type-h3-size:        36px;
    --type-h3-line-height: normal;


    --type-h4-family:      var(--font-graphik);
    --type-h4-size:        28px;
    --type-h4-weight:      400;
    --type-h4-line-height: normal;


    --type-h5g-size:       24px;


    --type-h6-size:        18px;


    --type-small-size:     9px;
  }
}