:root {
  --tagon-blue: #1F48CF;
  --tagon-cream: #FFF7AE;
  --tagon-white: #FAFAFA;
  --tagon-background: #FAFAFA;
  --tagon-ink: #141B33;
  --tagon-grey: #5A6280;
  --tagon-mist: #EEF1FC;
  --tagon-rule: #D6DCF2;
  --tagon-sub: #BFCBF2;
  --tagon-amber: #B5761A;
  --tagon-blue-hover: #193AA6;
  --tagon-font-heading: "Poppins", Arial, sans-serif;
  --tagon-font-body: "Carlito", "Calibri", Arial, sans-serif;
}

/* Semantic mappings */
:root {
  --color-background: var(--tagon-background);
  --color-surface: var(--tagon-mist);
  --color-text: var(--tagon-ink);
  --color-text-muted: var(--tagon-grey);
  --color-primary: var(--tagon-blue);
  --color-primary-text: var(--tagon-white);
  --color-accent: var(--tagon-cream);
  --color-border: var(--tagon-rule);
}