/* Auth Login Design Tokens */
/* Note: All core tokens (--color-*, --grey-*, --fs-*, --space-*, --shadow-*, --radius-*, --easing-*) are defined in tokens.css */
/* Login-specific tokens only - these extend/override core tokens for login page specific needs */

:root {
  /* Login-specific color modifications */
  /* Use RGB versions of core tokens for gradients to support color schemes */
  --login-color-primary-tint: #70D2FF; /* Login-specific tint - can be generated from primary if needed */
  --login-color-primary-tint: 112, 210, 255;
  --login-color-gold: #C5A146; /* Login-specific gold accent */
  --login-color-gold: 197, 161, 70;
  
  /* Login-specific gradients using core tokens (adapts to color schemes automatically) */
  --login-gradient-primary: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-primary-hover)) 100%);
  --login-gradient-surface: linear-gradient(135deg, rgba(var(--color-canvas), 0.9) 0%, rgba(var(--color-canvas), 0.7) 100%);
  --login-gradient-overlay: linear-gradient(135deg, rgba(var(--color-navy), 0.1) 0%, rgba(var(--color-primary), 0.05) 100%);
  --login-gradient-background: linear-gradient(135deg, rgb(var(--color-canvas)) 0%, rgb(var(--grey-50)) 100%);
  
  /* Login-specific element sizes (not in core tokens) */
  --login-input-height: clamp(48px, 8vh, 72px);
  --login-button-height: clamp(56px, 10vh, 88px);
  --login-button-height-secondary: clamp(48px, 8vh, 72px);
  --login-icon-size: clamp(24px, 4vw, 32px);
  --login-icon-size-large: clamp(64px, 12vw, 120px);
  
  /* Login-specific spacing (extends core --space-* tokens) */
  --login-space-colossal: clamp(80px, 20vh, 200px);
  --login-space-xxl: clamp(60px, 15vh, 150px);
  --login-space-xl: clamp(48px, 12vh, 120px);
  
  /* Login-specific typography scale (extends core --fs-* tokens) */
  --login-font-size-colossal: clamp(80px, 12vw, 144px);
  --login-font-size-huge: clamp(48px, 8vw, 96px);
  --login-font-size-xlarge: clamp(32px, 6vw, 64px);
  --login-font-size-large: clamp(24px, 4vw, 48px);
  --login-font-size-medium: clamp(18px, 3vw, 32px);
  
  /* Login-specific motion (extends core --easing-* tokens) */
  --login-transition-spring: 200ms var(--easing-bounce);
  --login-transition-dramatic: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  
  /* Login-specific layout */
  --login-container-padding: 5vw;
  --login-max-width: 100vw;
  
  /* Login-specific shadows (extends core --shadow-* tokens, uses RGB for color scheme support) */
  --login-shadow-subtle: 0 2px 10px rgba(var(--color-navy), 0.05);
  --login-shadow-medium: 0 8px 30px rgba(var(--color-navy), 0.12);
  --login-shadow-dramatic: 0 20px 50px rgba(var(--color-navy), 0.15);
  --login-shadow-glow: 0 0 30px rgba(var(--color-primary), 0.2);
  
  /* Login-specific focus halo */
  --login-focus-halo: 3px solid var(--login-color-primary-tint);
  
  /* Backward compatibility aliases - use login-specific tokens or fallback to core tokens */
  /* These allow existing login CSS files to work while transitioning to global color schemes */
  --input-height: var(--login-input-height);
  --button-height: var(--login-button-height);
  --button-height-secondary: var(--login-button-height-secondary);
  --icon-size: var(--login-icon-size);
  --icon-size-large: var(--login-icon-size-large);
  --container-padding: var(--login-container-padding);
  
  /* Typography aliases - use login-specific tokens */
  --font-size-colossal: var(--login-font-size-colossal);
  --font-size-huge: var(--login-font-size-huge);
  --font-size-xlarge: var(--login-font-size-xlarge);
  --font-size-large: var(--login-font-size-large);
  --font-size-medium: var(--login-font-size-medium);
  --font-size-body: var(--fs-body);
  --font-size-small: var(--fs-body-sm);
  --font-size-micro: var(--fs-caption);
  
  /* Spacing aliases - use login-specific tokens */
  --space-colossal: var(--login-space-colossal);
  --space-xxl: var(--login-space-xxl);
  --space-xl: var(--login-space-xl);
  --space-lg: var(--space-5);
  --space-md: var(--space-4);
  --space-sm: var(--space-3);
  --space-xs: var(--space-2);
  --space-xxs: var(--space-1);
  --space-micro: var(--space-0);
  
  /* Motion aliases */
  --transition-spring: var(--login-transition-spring);
  --transition-dramatic: var(--login-transition-dramatic);
  
  /* Shadow aliases - use login-specific shadows with RGB for color scheme support */
  --shadow-subtle: var(--login-shadow-subtle);
  --shadow-medium: var(--login-shadow-medium);
  --shadow-dramatic: var(--login-shadow-dramatic);
  --shadow-glow: var(--login-shadow-glow);
  
  /* Gradient aliases */
  --gradient-primary: var(--login-gradient-primary);
  --gradient-surface: var(--login-gradient-surface);
  --gradient-overlay: var(--login-gradient-overlay);
  
  /* Focus halo alias */
  --focus-halo: var(--login-focus-halo);
}

/* Responsive token overrides for login-specific tokens */
@media (max-width: 480px) {
  :root {
    --login-space-colossal: clamp(40px, 10vh, 80px);
    --login-space-xxl: clamp(32px, 8vh, 60px);
    --login-space-xl: clamp(24px, 6vh, 48px);

    --login-font-size-colossal: clamp(36px, 8vw, 64px);
    --login-font-size-huge: clamp(24px, 6vw, 48px);
    --login-font-size-xlarge: clamp(20px, 5vw, 32px);
    --login-font-size-large: clamp(16px, 4vw, 24px);
    --login-font-size-medium: clamp(14px, 3vw, 20px);

    --login-input-height: clamp(44px, 6vh, 56px);
    --login-button-height: clamp(48px, 8vh, 64px);
    --login-button-height-secondary: clamp(44px, 6vh, 56px);
    --login-icon-size: clamp(20px, 3vw, 24px);
    --login-icon-size-large: clamp(40px, 8vw, 64px);
    --login-container-padding: 16px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  :root {
    --login-font-size-colossal: clamp(56px, 10vw, 96px);
    --login-font-size-huge: clamp(36px, 7vw, 72px);
    --login-font-size-xlarge: clamp(28px, 5.5vw, 48px);
    --login-font-size-large: clamp(20px, 4vw, 32px);
    --login-font-size-medium: clamp(16px, 3vw, 24px);

    --login-input-height: clamp(52px, 7vh, 64px);
    --login-button-height: clamp(60px, 9vh, 72px);
    --login-button-height-secondary: clamp(52px, 7vh, 64px);
    --login-icon-size: clamp(24px, 3.5vw, 28px);
    --login-icon-size-large: clamp(56px, 10vw, 80px);
    --login-container-padding: 24px;
  }
}

@media (max-width: 768px) and (orientation: landscape) {
  :root {
    --login-space-colossal: clamp(20px, 8vh, 40px);
    --login-space-xxl: clamp(16px, 6vh, 32px);
    --login-space-xl: clamp(16px, 4vh, 24px);

    --login-font-size-colossal: clamp(28px, 6vw, 48px);
    --login-font-size-huge: clamp(20px, 4vw, 32px);
    --login-font-size-xlarge: clamp(16px, 3.5vw, 24px);
    --login-font-size-large: clamp(14px, 3vw, 20px);
    --login-font-size-medium: clamp(12px, 2.5vw, 16px);

    --login-input-height: clamp(36px, 5vh, 48px);
    --login-button-height: clamp(40px, 6vh, 56px);
    --login-button-height-secondary: clamp(36px, 5vh, 48px);
    --login-icon-size: clamp(16px, 2.5vw, 20px);
    --login-icon-size-large: clamp(32px, 6vw, 48px);
  }
}