:root {
  /* Typography */
  --font-family-body: 'Mona Sans', sans-serif;
  --font-family-heading: 'Archivo', sans-serif;
  --font-family-script: 'Corinthia', cursive;

  /* Font Sizes */
  --font-size-small: 0.875rem;
  --font-size-base: 1rem;
  --font-size-large: 1.25rem;
  --font-size-x-large: 1.5rem;
  --font-size-xx-large: 2rem;
  --font-size-xxx-large: 3rem;

  /* Font Weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-black: 900;

  /* Extra Colors */
  --color-accent-red: #8D3434;
  --color-accent-yellow: #D89859;
  --color-accent-green: #3A7D44;

  /* Neutral Colors */
  --color-neutral-100: #222526;
  --color-neutral-200: #353637;
  --color-neutral-300: #414344;
  --color-neutral-400: #626566;
  --color-neutral-500: #7A7D7F;
  --color-neutral-600: #939799;
  --color-neutral-700: #ABB0B2;
  --color-neutral-800: #B7BCBF;
  --color-neutral-900: #CCD1D4;
  --color-neutral-1000: #E6E9EB;
  --color-neutral-1100: #EDF1F2;
  --color-neutral-1200: #F5F8FA;
  --color-neutral-1300: #F8FAFB;
  --color-neutral-1400: #FFFFFF;

  /* Yellow Colors */
  --color-yellow-100: #FEF9E5;
  --color-yellow-200: #FEF5CE;
  --color-yellow-300: #FFE680;
  --color-yellow-400: #FAD66C;
  --color-yellow-500: #FFD11A;
  --color-yellow-600: #F1A80D;
  --color-yellow-700: #CF8909;
  --color-yellow-800: #AD6D06;
  --color-yellow-900: #8B5204;
  --color-yellow-1000: #734002;
  --color-yellow-1100: #522E02;

  /* Yellowbg Colors */
  --color-yellowbg-100: #F6F5F0;
  --color-yellowbg-200: #F6F4EB;
  --color-yellowbg-300: #F5F2E6;
  --color-yellowbg-400: #F5F2E2;
  --color-yellowbg-500: #F4F0DD;
  --color-yellowbg-600: #FFE6C2;
  --color-yellowbg-700: #F2EDD3;
  --color-yellowbg-800: #F2ECCE;
  --color-yellowbg-900: #F1EBCA;
  --color-yellowbg-1000: #F0E8C0;
  --color-yellowbg-1100: #80735C;

  /* Shadows */
  --box-shadow-xlarge: 12px 12px 0px 0px var(--color-neutral-200);
  --box-shadow-large: 8px 8px 0px 0px var(--color-neutral-200);
  --box-shadow-medium: 6px 6px 0px 0px var(--color-neutral-200);
  --box-shadow-small: 4px 4px 0px 0px var(--color-neutral-200);
  --box-shadow-xsmall: 2px 2px 0px 0px var(--color-neutral-200);
}

/* ── Responsive Token Overrides ── */
@media (max-width: 1440px) {
  :root {
    --font-size-xxx-large: 2.5rem;
    --font-size-xx-large: 1.75rem;
  }
}

@media (max-width: 1024px) {
  :root {
    --font-size-xxx-large: 2.25rem;
    --font-size-xx-large: 1.5rem;
    --font-size-x-large: 1.35rem;
    --font-size-large: 1.125rem;
    --box-shadow-xlarge: 8px 8px 0px 0px var(--color-neutral-200);
    --box-shadow-large: 6px 6px 0px 0px var(--color-neutral-200);
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-xxx-large: 2rem;
    --font-size-xx-large: 1.35rem;
    --font-size-x-large: 1.25rem;
    --font-size-large: 1.05rem;
    --font-size-base: 0.95rem;
    --box-shadow-xlarge: 6px 6px 0px 0px var(--color-neutral-200);
    --box-shadow-large: 4px 4px 0px 0px var(--color-neutral-200);
    --box-shadow-medium: 4px 4px 0px 0px var(--color-neutral-200);
    --box-shadow-small: 3px 3px 0px 0px var(--color-neutral-200);
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-xxx-large: 1.75rem;
    --font-size-xx-large: 1.25rem;
    --font-size-x-large: 1.125rem;
    --font-size-large: 1rem;
    --font-size-base: 0.9rem;
    --font-size-small: 0.8rem;
    --box-shadow-large: 3px 3px 0px 0px var(--color-neutral-200);
    --box-shadow-medium: 3px 3px 0px 0px var(--color-neutral-200);
    --box-shadow-small: 2px 2px 0px 0px var(--color-neutral-200);
    --box-shadow-xsmall: 1px 1px 0px 0px var(--color-neutral-200);
  }
}