:root {
  /* ===== Brand Colors ===== */
  --color-brand-primary: #6397c6; /* Sky Blue */
  --color-brand-secondary: #2c4660; /* Deep Navy */
  --color-brand-accent: #adc9e3; /* Pastel Blue */
  --color-brand-background: #fafafa; /* Soft Neutral */

  /* ===== Extended Neutrals ===== */
  --color-white: #ffffff;
  --color-black-true: #000000;
  --color-black-soft: #1a1a1a;     /* preferred text black */
  --color-gray-100: #f5f5f5;
  --color-gray-200: #e0e0e0;
  --color-gray-300: #c4c4c4;
  --color-gray-600: #666666;
  --color-gray-800: #333333;
  --color-gray-900: #212121;

  /* ===== Typography Colors ===== */
  --color-text-base: var(--color-black-soft);
  --color-text-muted: var(--color-gray-600);
  --color-text-heading: var(--color-brand-secondary);
  --color-text-inverse: var(--color-white);

  /* ===== Feedback / Status ===== */
  --color-success: #4caf50;
  --color-warning: #f5b01b;
  --color-danger: #e53935;
  --color-info: #1fbcd6;

  /* ===== Links ===== */
  --color-link: var(--color-brand-primary);
  --color-link-hover: #4a7aa6;

  /* ===== Typography Fonts ===== */
  --font-family-base: "Nunito", sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
}

--bg-gradient-brand-primary: linear-gradient(0deg,rgba(99, 151, 198, 0.57) 14%, rgba(255, 255, 255, 0.81) 100%);
--bg-gradient-brand-secondary: linear-gradient(0deg,rgba(44, 70, 96, 0.57) 14%, rgba(255, 255, 255, 0.81) 100%);

/* ===== Base Typography ===== */
body {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  color: var(--color-text-base);
  background-color: var(--color-brand-background);
  line-height: 1.6;
}

/* Headings */
h1, .heading--xl {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-extrabold);
  color: var(--color-text-heading);
}
h2, .heading--lg {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}
h3, .heading--md {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-heading);
}
h4, .heading--sm,
h5, .heading--xs,
h6, .heading--xxs {
  font-family: var(--font-family-base);
  font-weight: var(--font-weight-regular);
  color: var(--color-text-heading);
}

/* Muted text */
.u-text--muted { color: var(--color-text-muted) !important; }

/* Inverse text */
.u-text--inverse { color: var(--color-text-inverse) !important; }

/* Link text */
.u-text--link { color: var(--color-link) !important; }
.u-text--link:hover { color: var(--color-link-hover) !important; }