:root {

    /* Color Palette */
    --color-sprq-slate: #546a7b;
    --color-sprq-teal: #62929e;
    --color-sprq-gray: #393d3f;
    --color-sprq-light-gray: #5d6163;
    --color-sprq-accent: #d25b5b;

    --font-family-accent: SPRQ_Cursive;

    --color-primary: var(--color-sprq-gray);
    --background-primary: white;

    --color-accent: var(--color-sprq-teal);
    --color-action: var(--color-accent);

    --color-secondary: white;
    --background-secondary: var(--color-sprq-slate);

    --padding-left-paragraph: 32px;
    --padding-right-paragraph: var(--padding-left-paragraph);

    --border-radius-small: 4px;
    --border-radius-normal: 12px;


    /* Title (e.g., h1) */
    --color-title: var(--color-sprq-slate);
    --font-size-title: 40px;
    --font-family-title: SPRQ_Serif;

    /* Title 2 (e.g., h2) */
    --color-title2: var(--color-title);
    --font-size-title2: 32px;
    --font-family-title2: var(--font-family-title);

    /* Title 3 (e.g., h3) */
    --color-title3: var(--color-title);
    --font-size-title3: 20px;
    --font-family-title3: var(--font-family-title);

    /* Standard Paragraph */
    --color-paragraph: var(--color-sprq-gray);
    --font-size-paragraph: 16px;
    --font-family-paragraph: SPRQ_Sans;

    /* Mobile Paragraph */
    --color-paragraph-mobile: var(--color-sprq-gray);
    --font-size-paragraph-mobile: 12px;
    --font-family-paragraph-mobile: SPRQ_Sans;

     /* Caption */
    --color-caption: var(--color-paragraph);
    --font-size-caption: 12px;
    --font-family-caption: var(--font-family-paragraph);

    /* Interactive Map */
    --map-fill-active: var(--color-sprq-teal);
    --map-fill-hover: var(--color-sprq-slate);
    --map-fill-inactive: var(--color-sprq-gray);
    --map-highlight: var(--color-sprq-accent);
    --map-highlight-hover: var(--color-sprq-teal);
    --map-stroke-active: var(--color-sprq-teal);
    --map-stroke-hover: var(--color-sprq-slate);
    --map-stroke-inactive: var(--color-sprq-light-gray);
    
   

    
}

@font-face {
  font-family: 'SPRQ_Cursive';
  src: url('/assets/fonts/CedarvilleCursive-Regular.ttf') format('truetype');
  font-weight: 400; /* adjust font-weight as needed */
  font-style: normal; /* adjust font-style as needed */
  font-display: swap;
}

@font-face {
  font-family: 'SPRQ_Serif';
  src: url('/assets/fonts/Average-Regular.ttf') format('truetype');
  font-weight: 400; /* adjust font-weight as needed */
  font-style: normal; /* adjust font-style as needed */
  font-display: swap;
}

@font-face {
  font-family: 'SPRQ_Sans';
  src: url('/assets/fonts/AverageSans-Regular.ttf') format('truetype');
  font-weight: 400; /* adjust font-weight as needed */
  font-style: normal; /* adjust font-style as needed */
  font-display: swap;
}