/* quicksand-400 - regular */
@font-face {
    font-family: 'Quicksand';
    src: url('../fonts/quicksand-regular.woff2') format('woff2'); 
    font-style: normal;
    font-weight: 400;
    font-display: swap;
  }
  /* quicksand-600 - medium */
  @font-face {
    font-family: 'Quicksand';
    src: url('../fonts/quicksand-600.woff2') format('woff2'); 
    font-style: normal;
    font-weight: 600;
    font-display: swap;
  }
  /* quicksand-700 - bold */
  @font-face {
    font-family: 'Quicksand';
    src: url('../fonts/quicksand-700.woff2') format('woff2'); 
    font-style: normal;
    font-weight: 700;
    font-display: swap;
  }
  
  :root {
    /* Base */
    --color-text:       #465165;
    --color-caption:    #3956A0;
    --color-bg:         #ffffff;
    --color-bg-alt:     #E9E7E0;
    --color-active-item: #E1E3E6;
  
    /* Brand */
    --color-primary:    #52AEA8;
    --color-secondary:  #DA408F;
  
    /* Accents */
    --color-accent-1:   #F3BC69;
    --color-accent-2:   #E09F76;
    --color-accent-3:   #764593;
    --color-accent-4:   #CBC2B1;
    --color-accent-5:   #519C6A;
  
    /* Font sizes */
    --font-size-default: 1rem;
    --font-size-small: 0.88rem;
  }


/*==== TITLES ====*/
h1 {
    font-size: clamp(2.2rem, 5.5vw, 3.2rem);
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 2rem;
    color: var(--color-text);
  }

h2 {
    font-size: clamp(1.8rem, 4.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 1.5rem;
  }
  
h3 {
    font-size: clamp(1.5rem, 3.5vw, 2.2rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 1rem;
  }
  
h4 {
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 600;
    margin-bottom: 0.75rem;
  }
  
h5 {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.6;
    margin-bottom: 0.6rem;
  }
  
h6 {
    font-size: 1rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
  }  
  p, ul {
    font-size: 1rem;
    line-height: 1.6;
    font-weight: 500;
  }

  .site-footer a {
    color: var(--color-bg);
  }
  a, 
  .site-footer .footer-links a {
    color: var(--color-primary);
  }