/* Design tokens + button styles flattened from
   PRIVATE-veridian-wallet/services/credential-server-ui/src/styles/{colors,main}.scss */
:root {
  --color-primary-100: #e6f1ff;
  --color-primary-200: #cce3ff;
  --color-primary-300: #99c7ff;
  --color-primary-400: #66aaff;
  --color-primary-500: #338dff;
  --color-primary-600: #006ddb;
  --color-primary-700: #0056b3;
  --color-primary-800: #004289;

  --color-neutral-100: #f9fafb;
  --color-neutral-200: #eeeff2;
  --color-neutral-300: #ced3da;
  --color-neutral-400: #9ea7b3;
  --color-neutral-500: #6c7580;
  --color-neutral-600: #4e5661;
  --color-neutral-700: #343b45;
  --color-neutral-800: #1f242b;
  --color-neutral-900: #0d0f12;

  --color-success-100: #e6fae6;
  --color-success-400: #4caf50;
  --color-success-800: #1e7d32;

  --color-warning-100: #fff5e6;
  --color-warning-400: #ffb74d;
  --color-warning-800: #b26800;

  --color-error-100: #ffe6e6;
  --color-error-400: #ff6b6b;
  --color-error-800: #a30000;

  --color-neutral-700-rgb: 52, 59, 69;
  --color-neutral-800-rgb: 31, 36, 43;
  --color-error-800-rgb: 163, 0, 0;

  --primary-color: var(--color-primary-700);
  --secondary-color: var(--color-neutral-500);
  --background-color: var(--color-neutral-200);
  --text-color: var(--color-neutral-700);
}

body {
  margin: 0;
  font-size: 16px;
  font-family: "Manrope", system-ui, sans-serif;
  text-transform: none;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--text-color);
  background: var(--color-neutral-100);
}

.hidden { display: none; }

button {
  font: inherit;
  border: 0;
  border-radius: 0.5rem;
  padding: 0.4rem 0.9rem;
  cursor: pointer;

  &.primary-button {
    color: var(--color-neutral-100);
    background-color: var(--color-primary-700);
  }
  &.primary-button:hover, &.primary-button:active {
    background:
      linear-gradient(0deg, rgba(var(--color-neutral-800-rgb), 0.2) 0%, rgba(var(--color-neutral-800-rgb), 0.2) 100%),
      var(--color-primary-700);
  }
  &.secondary-button {
    color: var(--text-color);
    background-color: var(--color-neutral-300);
  }
  &.secondary-button:hover, &.secondary-button:active {
    background:
      linear-gradient(0deg, rgba(var(--color-neutral-800-rgb), 0.2) 0%, rgba(var(--color-neutral-800-rgb), 0.2) 100%),
      var(--color-neutral-300);
  }
  &.delete-button {
    color: var(--color-neutral-100);
    background-color: var(--color-error-800);
  }
  &.delete-button:hover, &.delete-button:active {
    background:
      linear-gradient(0deg, rgba(var(--color-neutral-800-rgb), 0.2) 0%, rgba(var(--color-neutral-800-rgb), 0.2) 100%),
      var(--color-error-800);
  }
  &:disabled {
    color: var(--color-neutral-600);
    background-color: var(--color-neutral-400);
    cursor: default;
  }
}

a { color: var(--primary-color); }