// === AUTH VARIABLES ===
// Variables customizables para los componentes de autenticación

// Colors - Usando variables CSS dinámicas del tema
$auth-primary-start: var(--starman-primary-color, #667eea);
$auth-primary-end: var(--starman-secondary-color, var(--starman-primary-color, #667eea));
$auth-primary-hover-start: var(--starman-primary-hover, #5a6fd8);
$auth-primary-hover-end: var(--starman-secondary-color, var(--starman-primary-color, #667eea));

// Color de acento para elementos especiales (opcional)
$auth-accent-color: var(--starman-accent-color, var(--starman-primary-color, #667eea));
$auth-title-start: #2c3e50;
$auth-title-end: #4a6741;

// Spacing
$auth-padding-mobile: 0.5rem 2rem 2rem 2rem;
$auth-padding-tablet: 3.5rem 3rem;
$auth-padding-desktop: 1.2rem 3.5rem;

// Typography
$auth-font-family: 'Inter', sans-serif;
$auth-title-size-mobile: 1.9rem;
$auth-title-size-desktop: 2rem;
$auth-title-size-large: 2.25rem;

// Layout
$auth-card-max-width: 900px;
$auth-mobile-max-width: 420px;
$auth-desktop-height: 600px;
$auth-desktop-min-height: 550px; // Para login/password sin scroll
$auth-mobile-image-height: 200px; // Altura de imagen en móvil

// Border radius
$auth-border-radius: 1.5rem;
$auth-input-border-radius: 0.75rem;
$auth-logo-border-radius: 0.75rem;

// Shadows
$auth-card-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.05);
$auth-card-shadow-mobile: 0 20px 40px -12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.1);
$auth-input-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
$auth-button-shadow: 0 4px 14px rgba(102, 126, 234, 0.3), 0 1px 3px rgba(0, 0, 0, 0.1);
$auth-button-hover-shadow: 0 8px 25px rgba(102, 126, 234, 0.4), 0 4px 10px rgba(0, 0, 0, 0.1);

// Scroll settings
$auth-scrollbar-width: 6px;
$auth-scroll-padding-tablet: 1rem;
$auth-scroll-padding-desktop: 1.5rem;

// Mixin para imágenes responsive
@mixin auth-responsive-image {
  object-fit: cover;
  width: 100%;
  height: 100%;

  @media (max-width: 767.98px) {
    object-position: center top;
    height: $auth-mobile-image-height;
  }

  @media (min-width: 768px) {
    object-position: center center;
    min-height: $auth-desktop-min-height;
  }
}
