:root {
  --nx-bg-page: #e9eef1;
  --nx-bg-page-alt: #DDDEDF;
  --nx-bg-card: #FFFFFF;
  --nx-bg-card-muted: #EFEFF0;
  --nx-bg-header: #FFFFFF;

  --nx-text-primary: #2D3439;
  --nx-text-secondary: #818588;
  --nx-text-tertiary: #C5C7C9;
  --nx-text-inverse: #FFFFFF;

  --nx-border-primary: #DDDEDF;
  --nx-border-secondary: #EFEFF0;

  --nx-button-primary-bg: #171A1D;
  --nx-button-primary-text: #FFFFFF;
  --nx-button-secondary-bg: #DDDEDF;
  --nx-button-secondary-text: #2D3439;

  --nx-input-bg: #FFFFFF;
  --nx-input-border: #DDDEDF;
  --nx-input-text: #2D3439;
  --nx-input-placeholder: #818588;
  --nx-input-focus: #2D3439;

  --nx-icon-primary: #2D3439;
  --nx-icon-secondary: #818588;
  --nx-icon-inverse: #FFFFFF;

  --nx-success: #4CAC3A;
  --nx-warning: #E26104;
  --nx-danger: #CF1717;
  --nx-info: #5EA6ED;
}

html,
body {
  background: var(--nx-bg-page);
  color: var(--nx-text-primary);
}

.nx-page {
  background: var(--nx-bg-page);
  color: var(--nx-text-primary);
}

.nx-header-surface {
  background: var(--nx-bg-header);
}

.nx-card {
  background: var(--nx-bg-card);
  color: var(--nx-text-primary);
  border: 1px solid var(--nx-border-primary);
}

.nx-card--muted {
  background: var(--nx-bg-card-muted);
}

.nx-text-secondary {
  color: var(--nx-text-secondary);
}

.nx-input {
  background: var(--nx-input-bg);
  color: var(--nx-input-text);
  border: 1px solid var(--nx-input-border);
}

.nx-input::placeholder {
  color: var(--nx-input-placeholder);
}

.nx-input:focus {
  outline: none;
  border-color: var(--nx-input-focus);
}

.nx-button-primary {
  background: var(--nx-button-primary-bg);
  color: var(--nx-button-primary-text);
  border: 1px solid var(--nx-button-primary-bg);
}

.nx-button-secondary {
  background: var(--nx-button-secondary-bg);
  color: var(--nx-button-secondary-text);
  border: 1px solid var(--nx-border-primary);
}

.nx-icon {
  color: var(--nx-icon-primary);
}

.nx-status-success {
  color: var(--nx-success);
}

.nx-status-warning {
  color: var(--nx-warning);
}

.nx-status-danger {
  color: var(--nx-danger);
}
