@font-face {
  font-family: 'Nerfos Alt01';
  src: url('../fonts/nerfos-alt01.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nerfos Alt02';
  src: url('../fonts/nerfos-alt02.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Nerfos Alt03';
  src: url('../fonts/nerfos-alt03.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

:root {

    /* Text Fonts */
    --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-heading: 'Oswald', sans-serif;
    --font-sketch1: 'Nerfos Alt01', sans-serif;
    --font-sketch2: 'Nerfos Alt02', sans-serif;
    --font-sketch3: 'Nerfos Alt03', sans-serif;

    /* Typography */
    --text-size-paragraph: 1.4rem;
    --color-text: #1a1a1a;
    --color-text-light: #787878;
    --color-text-inverse: var(--color-white);

    /* Colors */
    --color-primary: #192b41;        /* dark navy blue */
    --color-primary-light: #3a4f6b;  /* lighter blue for hover/accents */
    --color-primary-dark: #0f1a2a;   /* darker navy */

    --color-accent: #af1829;         /* strong red accent */
    --color-accent-light: #d4404f;   /* lighter red */
    --color-accent-dark: #7f101c;    /* darker red */

    /* Greyscale */
    --color-grey-400: #b5cacd;
    --color-grey-300: #c8d6d8;
    --color-grey-200: #dae4e6;
    --color-grey-100: #ecf1f2;
    --color-grey-50:  #f6f8f8;

    --color-white: #ffffff;
    --color-black: #000000;

    /* Backgrounds */
    --color-bg: var( --color-white);
    --color-bg-alt: var(--color-grey-50);
    --color-bg-dark: var(--color-primary);

    /* Borders */
    --color-border: var(--color-grey-400);
    --color-border-light: var(--color-grey-100);
    --color-border-dark: var(--color-primary-dark);
    --border-radius: 0.4rem;

    /* transitions */
    --transition-default: 0.3s ease;

    /* UI Feedback */
    --color-success: #2a6b46;       /* forest green */
    --color-warning: #d27f2c;       /* warm amber/orange */
    --color-error: #b24a4a;         /* muted brick red */

    /* Layout & spacing */
    --width-full: 1920px;
    --width-page: 1200px;
    --width-hero: 840px;
    --width-content: 768px;
    --width-sidebar: 404px;
    --container-padding: ;
    --gap: 14px;

    /* Breakpoints */
    --bp-xxl: 1400px;
    --bp-xl: 1200px;
    --bp-lg: 992px;
    --bp-sm: 768px;
    --bp-xs: 576px;

}

@media (max-width: 575.98px) {
  
  :root {

    --text-size-paragraph: 1.2rem;

  }
}