:root {
  /* base color: the design-system greys (css/vendor/uoa-tokens.css). */
  --mt-color-base: var(--uoa-color-grey-700);
  --mt-color-base-dark: var(--uoa-color-text-default);
  /* Muted text. grey-500 is 4.76:1 on white but drops under 4.5:1 on the
     tinted panels (labels on profiles and news); the design system's muted
     text token is grey-600. */
  --mt-color-base-light: var(--uoa-color-text-muted);
  --mt-color-base-contrast: #F8FAFC;
  --mt-color-base-value: 51, 65, 85;
  --mt-color-base-contrast-value: 248, 250, 252;

  /* grey color */
  --mt-color-grey: #f1f5f9;

  /* primary color: the brand tokens (css/base/brand.css). The *-value RGB
     triplets cannot be derived from a colour token; keep them in sync. */
  --mt-color-primary: var(--uoa-color-brand-primary);
  --mt-color-primary-dark: var(--uoa-color-brand-primary-hover);
  --mt-color-primary-light: #38b2ac;
  --mt-color-primary-contrast: #ffffff;
  --mt-color-primary-value: 30, 116, 139;
  --mt-color-primary-dark-value: 14, 58, 70;
  --mt-color-primary-light-value: 56, 178, 172;
  --mt-color-primary-contrast-value: 255, 255, 255;
  --mt-color-primary-filter: invert(42%) sepia(31%) saturate(760%) hue-rotate(148deg) brightness(91%) contrast(88%);

  /* accent color */
  --mt-color-accent: #f1f5f9;
  --mt-color-accent-dark: #e2e8f0;
  --mt-color-accent-light: #f8fafc;
  --mt-color-accent-contrast: var(--mt-color-base);
  --mt-color-accent-contrast-value: var(--mt-color-base-value);

  /* secondary color - Royal Purple */
  --mt-color-secondary: #6366f1;
  --mt-color-secondary-dark: #4338ca;
  --mt-color-secondary-light: #eef2ff;
  --mt-color-secondary-contrast: #ffffff;
  --mt-color-secondary-value: 99, 102, 241;

  /* tint background */
  --mt-color-tint: #f8fafc;
  --mt-color-tint-contrast: var(--mt-color-base);
  --mt-color-tint-contrast-value: var(--mt-color-base-value);

  /* shade background */
  --mt-color-shade: #1e293b;
  --mt-color-shade-contrast: var(--mt-color-base-contrast);
  --mt-color-shade-contrast-value: var(--mt-color-base-contrast-value);

  /* dark colored background */
  --mt-color-dark-colored: #0f172a;
  --mt-color-dark-colored-contrast: #ffffff;
  --mt-color-dark-colored-value: 15, 23, 42;
  --mt-color-dark-colored-contrast-value: 255, 255, 255;

  /* colored background */
  --mt-color-colored: var(--mt-color-primary);
  --mt-color-colored-light: var(--mt-color-primary-light);
  --mt-color-colored-contrast: var(--mt-color-primary-contrast);
  --mt-color-colored-value: var(--mt-color-primary-value);
  --mt-color-colored-contrast-value: var(--mt-color-primary-contrast-value);

  /* bright background */
  --mt-color-bright: #ffffff;
  --mt-color-bright-contrast: var(--mt-color-base);
  --mt-color-bright-value: 255, 255, 255;
  --mt-color-bright-contrast-value: var(--mt-color-base-value);

  /* dark background */
  --mt-color-dark: #020617;
  --mt-color-dark-contrast: var(--mt-color-base-contrast);
  --mt-color-dark-contrast-value: var(--mt-color-base-contrast-value);

  /* pattern background */
  --mt-color-pattern: #ffffff;
  --mt-color-pattern-contrast: var(--mt-color-base);
  --mt-color-pattern-contrast-value: var(--mt-color-base-value);

  /* default background */
  --mt-color-default: #ffffff;
  --mt-color-default-light: #ffffff;
  --mt-color-default-contrast: var(--mt-color-base);
  --mt-color-default-value: 241, 245, 249;
  --mt-color-default-contrast-value: var(--mt-color-base-value);

  /* success - Emerald green */
  --mt-color-success: #10b981;
  --mt-color-success-dark: #065f46;
  --mt-color-success-contrast: #ffffff;

  /* danger - Crimson Red */
  --mt-color-danger: #e11d48;
  --mt-color-danger-dark: #9f1239;
  --mt-color-danger-contrast: #ffffff;

  /* warning - Amber */
  --mt-color-warning: #f59e0b;
  --mt-color-warning-dark: #b45309;
  --mt-color-warning-contrast: #ffffff;

  /* yellow - Vibrant Goldenrod */
  --color-accent-yellow: #facc15;
  --color-accent-yellow-light: #fefce8;
  --color-accent-yellow-soft: #fef08a;

  /* forms */
  --mt-form-border: rgba(var(--mt-color-base-value), 0.15);
  --mt-form-border-contrast: rgba(var(--mt-color-base-contrast-value), 0.3);
  --mt-form-border-focus: var(--mt-color-primary);
  --mt-form-border-focus-contrast: rgba(var(--mt-color-base-contrast-value), 1);
  --mt-form-color: var(--mt-color-base);
  --mt-form-color-contrast: var(--mt-color-base-contrast);
  --mt-form-label-color: var(--mt-color-base);
  --mt-form-placeholder: #94a3b8;
  --mt-form-placeholder-contrast: rgba(var(--mt-color-base-contrast-value), 0.5);
  --mt-active-cell: rgba(var(--mt-color-primary-value), 0.08);
}