/* TailAdmin Custom Styles for Auth Pages */

:root {
  /* Typography - Title Sizes */
  --text-title-sm: 30px;
  --text-title-sm-line-height: 38px;
  --text-title-md: 36px;
  --text-title-md-line-height: 44px;

  /* Brand Colors */
  --color-brand-50: #ecf3ff;
  --color-brand-100: #dce7fe;
  --color-brand-200: #c1d4fd;
  --color-brand-300: #96b7fb;
  --color-brand-400: #658ff7;
  --color-brand-500: #465fff;
  --color-brand-600: #3641f5;
  --color-brand-700: #2c30d9;
  --color-brand-800: #2528ae;
  --color-brand-900: #252889;
  --color-brand-950: #161950;

  /* Error Colors */
  --color-error-50: #fef2f2;
  --color-error-100: #fee2e2;
  --color-error-200: #fecaca;
  --color-error-300: #fca5a5;
  --color-error-400: #f87171;
  --color-error-500: #f04438;
  --color-error-600: #dc2626;
  --color-error-700: #b91c1c;
  --color-error-800: #991b1b;
  --color-error-900: #7f1d1d;

  /* Shadows */
  --shadow-theme-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05);
}

/* Typography Classes */
.text-title-sm {
  font-size: var(--text-title-sm);
  line-height: var(--text-title-sm-line-height);
}

.text-title-md {
  font-size: var(--text-title-md);
  line-height: var(--text-title-md-line-height);
}

/* Brand Color Classes - Backgrounds */
.bg-brand-50 { background-color: var(--color-brand-50); }
.bg-brand-100 { background-color: var(--color-brand-100); }
.bg-brand-200 { background-color: var(--color-brand-200); }
.bg-brand-300 { background-color: var(--color-brand-300); }
.bg-brand-400 { background-color: var(--color-brand-400); }
.bg-brand-500 { background-color: var(--color-brand-500); }
.bg-brand-600 { background-color: var(--color-brand-600); }
.bg-brand-700 { background-color: var(--color-brand-700); }
.bg-brand-800 { background-color: var(--color-brand-800); }
.bg-brand-900 { background-color: var(--color-brand-900); }
.bg-brand-950 { background-color: var(--color-brand-950); }

/* Brand Color Classes - Text */
.text-brand-50 { color: var(--color-brand-50); }
.text-brand-100 { color: var(--color-brand-100); }
.text-brand-200 { color: var(--color-brand-200); }
.text-brand-300 { color: var(--color-brand-300); }
.text-brand-400 { color: var(--color-brand-400); }
.text-brand-500 { color: var(--color-brand-500); }
.text-brand-600 { color: var(--color-brand-600); }
.text-brand-700 { color: var(--color-brand-700); }
.text-brand-800 { color: var(--color-brand-800); }
.text-brand-900 { color: var(--color-brand-900); }
.text-brand-950 { color: var(--color-brand-950); }

/* Brand Color Classes - Borders */
.border-brand-50 { border-color: var(--color-brand-50); }
.border-brand-100 { border-color: var(--color-brand-100); }
.border-brand-200 { border-color: var(--color-brand-200); }
.border-brand-300 { border-color: var(--color-brand-300); }
.border-brand-400 { border-color: var(--color-brand-400); }
.border-brand-500 { border-color: var(--color-brand-500); }
.border-brand-600 { border-color: var(--color-brand-600); }
.border-brand-700 { border-color: var(--color-brand-700); }
.border-brand-800 { border-color: var(--color-brand-800); }
.border-brand-900 { border-color: var(--color-brand-900); }
.border-brand-950 { border-color: var(--color-brand-950); }

/* Error Color Classes */
.text-error-50 { color: var(--color-error-50); }
.text-error-100 { color: var(--color-error-100); }
.text-error-200 { color: var(--color-error-200); }
.text-error-300 { color: var(--color-error-300); }
.text-error-400 { color: var(--color-error-400); }
.text-error-500 { color: var(--color-error-500); }
.text-error-600 { color: var(--color-error-600); }
.text-error-700 { color: var(--color-error-700); }
.text-error-800 { color: var(--color-error-800); }
.text-error-900 { color: var(--color-error-900); }

.bg-error-50 { background-color: var(--color-error-50); }
.bg-error-100 { background-color: var(--color-error-100); }
.bg-error-200 { background-color: var(--color-error-200); }
.bg-error-300 { background-color: var(--color-error-300); }
.bg-error-400 { background-color: var(--color-error-400); }
.bg-error-500 { background-color: var(--color-error-500); }
.bg-error-600 { background-color: var(--color-error-600); }
.bg-error-700 { background-color: var(--color-error-700); }
.bg-error-800 { background-color: var(--color-error-800); }
.bg-error-900 { background-color: var(--color-error-900); }

.border-error-50 { border-color: var(--color-error-50); }
.border-error-100 { border-color: var(--color-error-100); }
.border-error-200 { border-color: var(--color-error-200); }
.border-error-300 { border-color: var(--color-error-300); }
.border-error-400 { border-color: var(--color-error-400); }
.border-error-500 { border-color: var(--color-error-500); }
.border-error-600 { border-color: var(--color-error-600); }
.border-error-700 { border-color: var(--color-error-700); }
.border-error-800 { border-color: var(--color-error-800); }
.border-error-900 { border-color: var(--color-error-900); }

/* Shadow Utilities */
.shadow-theme-xs {
  box-shadow: var(--shadow-theme-xs);
}

/* Focus Ring Utilities */
.focus\:ring-3:focus {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:border-brand-300:focus {
  border-color: var(--color-brand-300);
}

.focus\:ring-brand-500\/10:focus {
  --tw-ring-color: rgba(70, 95, 255, 0.1);
}

/* Dark Mode Focus States */
.dark .dark\:focus\:border-brand-800:focus {
  border-color: var(--color-brand-800);
}

/* Hover States - Brand */
.hover\:bg-brand-600:hover { background-color: var(--color-brand-600); }
.hover\:bg-brand-500:hover { background-color: var(--color-brand-500); }
.hover\:text-brand-600:hover { color: var(--color-brand-600); }
.hover\:text-brand-500:hover { color: var(--color-brand-500); }

/* Dark Mode Hover States - Brand */
.dark .dark\:text-brand-400 { color: var(--color-brand-400); }
.dark .dark\:hover\:text-brand-300:hover { color: var(--color-brand-300); }

/* White Alpha Channel Utilities */
.bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2); }
.bg-white\/30 { background-color: rgba(255, 255, 255, 0.3); }
.bg-white\/40 { background-color: rgba(255, 255, 255, 0.4); }
.bg-white\/50 { background-color: rgba(255, 255, 255, 0.5); }
.bg-white\/60 { background-color: rgba(255, 255, 255, 0.6); }
.bg-white\/70 { background-color: rgba(255, 255, 255, 0.7); }
.bg-white\/80 { background-color: rgba(255, 255, 255, 0.8); }
.bg-white\/90 { background-color: rgba(255, 255, 255, 0.9); }

.text-white\/30 { color: rgba(255, 255, 255, 0.3); }
.text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.text-white\/90 { color: rgba(255, 255, 255, 0.9); }

/* Dark Mode Alpha Utilities */
.dark .dark\:bg-white\/5 { background-color: rgba(255, 255, 255, 0.05); }
.dark .dark\:bg-white\/10 { background-color: rgba(255, 255, 255, 0.1); }
.dark .dark\:hover\:bg-white\/10:hover { background-color: rgba(255, 255, 255, 0.1); }
.dark .dark\:text-white\/30 { color: rgba(255, 255, 255, 0.3); }
.dark .dark\:text-white\/60 { color: rgba(255, 255, 255, 0.6); }
.dark .dark\:text-white\/90 { color: rgba(255, 255, 255, 0.9); }

.dark .dark\:placeholder\:text-white\/30::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

/* Z-index Utilities */
.z-999999 { z-index: 999999; }
.z-1 { z-index: 1; }

/* Outline Hidden Utility */
.focus\:outline-hidden:focus {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* Size Utilities */
.size-14 {
  width: 3.5rem;
  height: 3.5rem;
}

/* Additional Dark Mode Background */
.dark .dark\:bg-dark-900 {
  background-color: #0f172a;
}