/* Carbon component tokens — packages/themes/src/component-tokens (white theme values)
   + button metrics from packages/styles/scss/components/button/_vars.scss */
:root {
  /* Button colors */
  --button-primary: #0f62fe;
  --button-primary-hover: #0050e6;
  --button-primary-active: #002d9c;
  --button-secondary: #393939;
  --button-secondary-hover: #474747;
  --button-secondary-active: #6f6f6f;
  --button-tertiary: #0f62fe;
  --button-tertiary-hover: #0050e6;
  --button-tertiary-active: #002d9c;
  --button-danger-primary: #da1e28;
  --button-danger-hover: #b81921;
  --button-danger-active: #750e13;
  --button-disabled: #c6c6c6;
  --button-separator: #e0e0e0;

  /* Button metrics (_vars.scss) */
  --button-border-radius: 0;
  --button-border-width: 2px;
  --button-outline-width: 1px;
  --button-font-size: 0.875rem;
  --button-font-weight: 400;

  /* Tag colors (white theme) */
  --tag-background-gray: var(--gray-20);
  --tag-color-gray: var(--gray-100);
  --tag-hover-gray: var(--gray-20-hover);
  --tag-background-red: var(--red-20);
  --tag-color-red: var(--red-70);
  --tag-background-magenta: var(--magenta-20);
  --tag-color-magenta: var(--magenta-70);
  --tag-background-purple: var(--purple-20);
  --tag-color-purple: var(--purple-70);
  --tag-background-blue: var(--blue-20);
  --tag-color-blue: var(--blue-70);
  --tag-background-cyan: var(--cyan-20);
  --tag-color-cyan: var(--cyan-70);
  --tag-background-teal: var(--teal-20);
  --tag-color-teal: var(--teal-70);
  --tag-background-green: var(--green-20);
  --tag-color-green: var(--green-70);

  /* Notification backgrounds (white theme) */
  --notification-background-error: var(--red-10);
  --notification-background-success: var(--green-10);
  --notification-background-info: var(--blue-10);
  --notification-background-warning: var(--yellow-10);
}