:root {
  /* ===== Brand / Primary Palette ===== */
  --brand-dark-blue: #003855; /* headers, CTAs, nav bg */
  --brand-light-blue: #5CABCB; /* accents, icons, info */
  --brand-white: #FFFFFF; /* base / backgrounds */
  --brand-black: #000000; /* primary text / icons */

  /* ===== Extended / Semantic ===== */
  --green-500: #42AD00;      /* success */
  --yellow-500: #FFD232;     /* warning / highlight */
  --red-500: #C53A2A;        /* error / critical */
  --blue-600: #1E6BA8;       /* info / tooltips / charts */

  /* ===== Neutrals ===== */
  --neutral-900: #4B4B4B;    /* primary text */
  --neutral-600: #9B9B9B;    /* secondary text / disabled */
  --neutral-300: #D2D2D2;    /* borders / dividers */
  --neutral-50:  #F5F5F5;    /* cards / surfaces */

  /* ===== Functional tokens (aliases) ===== */

  /* Text */
  --color-text: var(--neutral-900);
  --color-text-inverse: var(--brand-white);
  --color-text-secondary: var(--neutral-600);
  --color-link: var(--blue-600);
  --color-link-hover: var(--brand-dark-blue);

  /* Semi transparent Text */
  --color-text-on-dark-50: color-mix(in srgb, var(--brand-white) 50%, transparent);
  --color-text-on-dark-72: color-mix(in srgb, var(--brand-white) 72%, transparent);
  --color-text-on-dark-92: color-mix(in srgb, var(--brand-white) 92%, transparent);

  /* Backgrounds & Surfaces */
  --color-bg: var(--brand-white);
  --color-surface: var(--neutral-50);
  --color-surface-inverse: var(--brand-dark-blue);

  /* Brand */
  --color-brand: var(--brand-dark-blue);
  --color-brand-accent: var(--brand-light-blue);

  /* Feedback */
  --color-success: var(--green-500);
  --color-warning: var(--yellow-500);
  --color-error: var(--red-500);
  --color-info: var(--blue-600);

  /* Borders & UI */
  --color-border: var(--neutral-300);
  --color-divider: var(--neutral-300);
  --color-shadow: rgba(0, 0, 0, 0.15);
  --color-shadow-bg: rgba(0, 0, 0, 0.70);

  /* Focus ring */
  --focus-ring: 0 0 0 3px var(--brand-light-blue);
}