@layer theme {
  :root, :host {
    /* REWORKED */
    --color-brand-50: #ecf3ff;
    --color-brand-100: #dde9ff;
    --color-brand-300: #4f5983;
    --color-brand-400: #3b4786;
    --color-brand-500: #303F8A;
    --color-brand-600: #1e2f88;
    --color-brand-800: #2e42a7;
    --color-brand-950: #2d4be4;
    /* TODO */
    --color-orange-50: #fff6ed;
    --color-orange-400: #fd853a;
    --color-orange-500: #fb6514;
    --color-blue-500: oklch(0.623 0.214 259.815);
    --color-gray-50: #f9fafb;
    --color-gray-100: #f2f4f7;
    --color-gray-200: #e4e7ec;
    --color-gray-300: #d0d5dd;
    --color-gray-400: #98a2b3;
    --color-gray-500: #667085;
    --color-gray-600: #475467;
    --color-gray-700: #344054;
    --color-gray-800: #1d2939;
    --color-gray-900: #101828;
    --color-black: #101828;
    --color-white: #ffffff;
    --color-blue-light-50: #f0f9ff;
    --color-blue-light-500: #0ba5ec;
    --color-gray-dark: #1a2231;
    --color-success-50: #ecfdf3;
    --color-success-300: #6ce9a6;
    --color-success-500: #12b76a;
    --color-success-600: #039855;
    --color-success-700: #027a48;
    --color-success-800: #05603a;
    --color-error-50: #fef3f2;
    --color-error-300: #fda29b;
    --color-error-500: #f04438;
    --color-error-600: #d92d20;
    --color-error-700: #b42318;
    --color-error-800: #912018;
    --color-warning-50: #fffaeb;
    --color-warning-400: #fdb022;
    --color-warning-500: #f79009;
    --color-warning-600: #dc6803;
    --color-warning-700: #b54708;
    --color-theme-pink-500: #ee46bc;
    --color-theme-purple-500: #7a5af8;
  }
}

.menu-item-icon-inactive {
    fill: none;
}

/* Grid cols 3 for responsive dashboard metrics */
@media (min-width: 768px) {
  .md\:grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}