:root {
  /* Colors */
  --color-primary: #15bd80;
  --color-primary-hover: rgba(21, 189, 128, 0.85);
  --color-primary-dark: rgb(19, 129, 90);
  --color-text-primary: #3a3c40;
  --color-text-secondary: #82868c;
  --color-text-dark: #121625;
  --color-border: #babfc5;
  --color-border-light: rgb(227 230 235);
  --color-border-dark: rgb(58 60 64);
  --color-white: #fff;
  --color-background: rgb(251, 251, 251);
  --color-background-dark: rgb(18, 22, 37);
  --color-background-sidebar: rgb(29, 33, 46);
  --color-error: red;
  --color-danger: rgb(219 108 86);
  --color-danger-hover: rgb(183 71 59);
  --color-success: rgb(44, 197, 189);
  --color-warning: #fff3cd;
  --color-warning-text: #856404;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 32px;
  --spacing-xxxl: 40px;
  --spacing-xxxxl: 107px;

  /* Border Radius */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 16px;
  --border-radius-xl: 200px;

  /* Font Sizes */
  --font-size-xs: 10px;
  --font-size-sm: 13px;
  --font-size-md: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 32px;

  /* Line Heights */
  --line-height-sm: 14px;
  --line-height-md: 16px;
  --line-height-lg: 18px;
  --line-height-xl: 20px;
  --line-height-xxl: 28px;
  --line-height-xxxl: 39px;

  /* Font Weights */
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Shadows */
  --shadow-default: 0px 5px 18px 0px #28293d12;
  --shadow-dark: 0px 5px 18px 0px rgb(29, 33, 46);

  /* Transitions */
  --transition-fast: all 150ms ease-in-out;
  --transition-normal: all 300ms ease-in-out;
}

.auth-error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

.auth-error-logo {
  margin-bottom: var(--spacing-xxxl);
}

.auth-error-card {
  padding: var(--spacing-xxxl);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  width: 600px;
}

.auth-error-title {
  margin-bottom: var(--spacing-lg);
  color: var(--color-text-primary);
}

.auth-error-message {
  margin-bottom: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.auth-error-message-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.auth-error-message-text {
  color: var(--color-text-secondary);
}

.auth-error-details {
  background-color: var(--color-background-alt);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-md);
  width: 100%;
}

.auth-error-icon {
  margin-bottom: var(--spacing-md);
  width: 50px;
  height: 50px;
}

.auth-error-details-title {
  margin-bottom: var(--spacing-md);
  color: var(--color-text-primary);
  text-align: center;
  color: var(--color-border);
}

.auth-error-details-divider {
  border: 1px solid var(--color-text-primary);
  margin: var(--spacing-md) 0;
  height: 1px;
}

.auth-error-details-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--spacing-md);
}

.auth-error-details-label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.auth-error-details-value {
  color: var(--color-text-secondary);
}

.auth-error-actions {
  margin-top: var(--spacing-xl);
}

.auth-error-btn {
  display: inline-block;
  text-decoration: none;
}

/* Dark mode styles */
.dark .auth-error-container {
  background-color: var(--color-background-dark);
}

.dark .auth-error-card {
  border-color: var(--color-border-dark);
  background-color: var(--color-background-sidebar);
  box-shadow: var(--shadow-dark);
}

.dark .auth-error-title {
  color: var(--color-white);
}

.dark .auth-error-details {
  background-color: var(--color-background-dark);
}

.dark .auth-error-details-title {
  color: var(--color-white);
}

.dark .auth-error-details-label {
  color: var(--color-white);
}

.dark .auth-error-details-value {
  color: var(--color-text-secondary);
}

.dark .auth-error-details-divider {
  border-color: var(--color-border-dark);
}
