:root {
  /* Provided Colors */
  --color-primary: #eb0000;
  --color-main-bg: #ffffff;
  --color-main-text: #000000;
  --color-secondary: #2d327d;
  --color-tertiary: #4c4c4c;

  /* Added Grey Tones */
  --color-grey-dark: #333333;
  --color-grey-medium: #4c4c4c; /* Same as tertiary for consistency */
  --color-grey-light: #999999;
  --color-grey-xlight: #f4f4f4;

  /* Contextual Colors */
  --color-warning: #ffc107; /* Amber/Yellow for caution */
  --color-error: #dc3545; /* Red for errors */
  --color-info: #00bcd4; /* Cyan/Light Blue for information */
  --color-success: #28a745; /* Green for success */

  /* Font Family Definitions */
  --font-family-base: "neue-haas-unica", sans-serif;

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-regular: 400; /* Text */
  --font-weight-bold: 800; /* Primary */
  --font-weight-extrabold: 900; /* Accent */

  /* Font Mapping for Usage */
  --font-primary: var(--font-weight-bold) var(--font-family-base); /* 800 */
  --font-secondary: var(--font-weight-regular) var(--font-family-base); /* 400 */
  --font-text: var(--font-weight-regular) var(--font-family-base); /* 400 */
  --font-accent: var(--font-weight-extrabold) var(--font-family-base); /* 900 */
  --font-light: var(--font-weight-light) var(--font-family-base); /* 300 */

  --fs-h1: clamp(2.5rem, 4vw + 1rem, 4.25rem);
  --fs-h2: clamp(2rem, 3vw + 0.5rem, 3.5rem);
  --fs-h3: clamp(1.75rem, 2vw + 0.5rem, 2.5rem);
  --fs-h4: clamp(1.5rem, 1vw + 0.5rem, 1.875rem);
  --fs-h5: clamp(1.25rem, 0.5vw + 0.5rem, 1.5rem);
  --fs-h6: clamp(1.125rem, 0.25vw + 0.75rem, 1.25rem);
  --fs-body: clamp(1rem, 0.1vw + 0.9rem, 1.125rem);
  --fs-small: clamp(0.875rem, 0.05vw + 0.8rem, 1rem);

}
/* Base setup for 1rem = 16px */
html {
  font-size: 100%; /* Ensures 1rem = 16px by default if browser is 16px */
}

body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular); /* Default text weight 400 */
  line-height: 1.6;
  color: var(--color-main-text);
  background-color: var(--color-main-bg);
}

/* Fluid Typography for Headings and Text */
h1 {
  font-size: var(--fs-h1); /* Uses the revised clamp value */
}

h2 {
  font-size: var(--fs-h2);
}

h3 {
  font-size: var(--fs-h3);
}

h4 {
  font-size: var(--fs-h4);
}

h5 {
  font-size: var(--fs-h5);
}

h6 {
  font-size: var(--fs-h6);
}

/* Main Body Text */
p,
ul,
ol,
li,
.text-body {
  font-size: var(--fs-body);
}

/* Smaller font size for special text like bottom footer */
.text-small {
  font-size: var(--fs-small);
}