:root {
  --primary-25: #f4faf7;
  --primary-50: #e9f4ef;
  --primary-100: #c9e4d7;
  --primary-200: #a8d4bf;
  --primary-300: #7cbe9f;
  --primary-400: #51a97f;
  --primary-500: #25935f;
  --primary-600: #218456;
  --primary-700: #1e764c;
  --primary-800: #1a6743;
  --primary-900: #165839;
  --primary-950: #0f3b26;
  --secondary-25: #f9f6fa;
  --secondary-50: #f2eef5;
  --secondary-100: #dfd4e7;
  --secondary-200: #ccb9d9;
  --secondary-300: #b397c5;
  --secondary-400: #9974b2;
  --secondary-500: #80519f;
  --secondary-600: #73498f;
  --secondary-700: #66417f;
  --secondary-800: #5a396f;
  --secondary-900: #4d315f;
  --secondary-950: #332040;
  --accent-25: #f8f8f9;
  --accent-50: #f0f1f2;
  --accent-100: #dadcdf;
  --accent-200: #c4c7cc;
  --accent-300: #a7abb2;
  --accent-400: #898f99;
  --accent-500: #6c737f;
  --accent-600: #616872;
  --accent-700: #565c66;
  --accent-800: #4c5159;
  --accent-900: #41454c;
  --accent-950: #2b2e33;
  --error-25: #fef6f5;
  --error-50: #feeceb;
  --error-100: #fbd0cd;
  --error-200: #f9b4af;
  --error-300: #f68f88;
  --error-400: #f36960;
  --error-500: #f04438;
  --error-600: #d83d32;
  --error-700: #c0362d;
  --error-800: #a83027;
  --error-900: #902922;
  --error-950: #601b16;
  --warning-25: #fff9f3;
  --warning-50: #fef4e6;
  --warning-100: #fde3c2;
  --warning-200: #fcd39d;
  --warning-300: #fabc6b;
  --warning-400: #f9a63a;
  --warning-500: #f79009;
  --warning-600: #de8208;
  --warning-700: #c67307;
  --warning-800: #ad6506;
  --warning-900: #945605;
  --warning-950: #633a04;
  --info-25: #f5f9ff;
  --info-50: #eaf4ff;
  --info-100: #cbe3fe;
  --info-200: #abd3fd;
  --info-300: #82bcfc;
  --info-400: #58a6fb;
  --info-500: #2e90fa;
  --info-600: #2982e1;
  --info-700: #2573c8;
  --info-800: #2065af;
  --info-900: #1c5696;
  --info-950: #123a64;
  --success-25: #f3fbf8;
  --success-50: #e8f7f0;
  --success-100: #c5ecda;
  --success-200: #a2e0c3;
  --success-300: #74d1a6;
  --success-400: #45c188;
  --success-500: #17b26a;
  --success-600: #15a05f;
  --success-700: #128e55;
  --success-800: #107d4a;
  --success-900: #0e6b40;
  --success-950: #09472a;
}

:host {
  display: inline-block;
}

button {
  cursor: pointer;
  border: none;
  border-radius: 4px;
  font-family: inherit;
  font-weight: 500;
}

button.size-sm {
  padding: 3px 8px;
  font-size: 12px;
}

button.size-md {
  padding: 6px 12px;
  font-size: 14px;
}

button.size-lg {
  padding: 8px 16px;
  font-size: 16px;
}

/* Variants */
button.variant-flat {
  color: #ffffff;
}

button.variant-outlined {
  background-color: transparent;
  border: 2px solid currentColor;
}

/* Disabled */
button:disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--accent-400);
  background-color: var(--accent-200);
}