:root {
  --primary-color-start: #4F46E5;
  --primary-color-end: #6366F1;
  --text-color: #333333;
  --helper-text-color: #6B7280;
  --background-start: #F9FAFB;
  --background-end: #F0F2F5;
  --card-background-color: #FFFFFF;
  --error-color: #EF4444;
  --border-color: #E0E4E8;
  --input-border-color: #D1D5DB;
  --input-focus-border-color: #93C5FD;
  --input-focus-shadow-color: rgba(59, 130, 246, 0.3);
  --placeholder-color: #9CA3AF;
  --disabled-color: #BDBDEB;
}

[data-theme="dark"] {
  --primary-color-start: #6D28D9;
  --primary-color-end: #8B5CF6;
  --text-color: #E5E7EB;
  --helper-text-color: #9CA3AF;
  --background-start: #111827;
  --background-end: #1F2937;
  --card-background-color: #1F2937;
  --error-color: #F87171;
  --border-color: #374151;
  --input-border-color: #4B5563;
  --input-focus-border-color: #60A5FA;
  --input-focus-shadow-color: rgba(96, 165, 250, 0.3);
  --placeholder-color: #6B7280;
  --disabled-color: #5A5A9A;
}

.theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--text-color);
}

header {
    position: relative;
}