/* =====================================================
   EXTRO CSS VARIABLES - COMPREHENSIVE DARK MODE
   ===================================================== */

:root {
  /* ===== COLOR PALETTE - LIGHT MODE ===== */
  
  /* Background colors */
  --color-bg-page: #ffffff;
  --color-bg-card: #ffffff;
  --color-bg-secondary: #f7f7f7;
  --color-bg-tertiary: #eeeeee;
  --color-bg-hover: #f0f0f0;
  
  /* Text colors */
  --color-text-primary: #111111;
  --color-text-secondary: #666666;
  --color-text-tertiary: #999999;
  --color-text-muted: #aaaaaa;
  
  /* Border colors */
  --color-border-light: rgba(0, 0, 0, 0.06);
  --color-border-medium: rgba(0, 0, 0, 0.12);
  --color-border-strong: rgba(0, 0, 0, 0.18);
  
  /* Primary/Accent */
  --color-primary: #000000;
  
  /* Button styles - Action (Follow, Post, etc) */
  --color-btn-action: #000000;
  --color-btn-action-text: #ffffff;
  --color-btn-action-hover: #1a1a1a;
  
  /* Button styles - Subtle (Following, Cancel, etc) */
  --color-btn-subtle: #f7f7f7;
  --color-btn-subtle-text: #666666;
  --color-btn-subtle-hover: #e8e8e8;
  
  /* Shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.40), 0 4px 16px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 8px 24px rgba(0, 0, 0, 0.15);
  
  /* Error colors */
  --color-error-bg: rgba(176, 0, 32, 0.08);
  --color-error-border: rgba(176, 0, 32, 0.18);
  --color-error-text: #7a0015;
  
  /* Auth page specific */
  --color-auth-bracket: rgba(0, 0, 0, 0.16);
  --color-auth-title: #111111;
  --color-auth-subtitle: #666666;
  --color-auth-input-border: rgba(0, 0, 0, 0.12);
  --color-auth-input-border-focus: rgba(0, 0, 0, 0.35);
  --color-auth-input-bg: #ffffff;
  
  /* Search page specific */
  --color-search-remove-btn: #aaaaaa;
  --color-search-remove-btn-hover: #666666;
  
  /* Profile page specific */
  --color-profile-bio-bg: transparent;
  --color-profile-stats-separator: rgba(0, 0, 0, 0.12);
  
  /* Activity/Connections specific */
  --color-activity-divider: rgba(0, 0, 0, 0.04);
  --color-activity-unread-dot: #007aff;
  
  /* Poll card specific */
  --color-poll-option-border: rgba(0, 0, 0, 0.10);
  --color-poll-option-bg: var(--color-bg-secondary);
  --color-poll-option-hover: rgba(0, 0, 0, 0.04);
  --color-poll-selected-bg: #111111;
  --color-poll-selected-text: #ffffff;
  --color-poll-percentage-bg: rgba(0, 0, 0, 0.08);
  --color-poll-percentage: rgba(0, 0, 0, 0.12);
  --color-poll-percentage-mine: rgba(0, 0, 0, 0.22);
  --color-poll-percentage-fill: #111111;
  --color-poll-bar-fill: #eaeaea;
  
  /* Menu item danger hover */
  --color-menu-danger-hover: rgba(176, 0, 32, 0.08);
  
  /* Create poll modal specific */
  --color-modal-backdrop: rgba(0, 0, 0, 0.45);
  --color-modal-backdrop-heavy: rgba(0, 0, 0, 0.75);
  --color-modal-card-shadow: rgba(0, 0, 0, 0.18);
  
  /* Edit profile specific */
  --color-edit-title: rgba(0, 0, 0, 0.45);
  --color-edit-input-border-focus: rgba(0, 0, 0, 0.22);
  --color-edit-locked-border: rgba(0, 0, 0, 0.10);
  
  /* PYMK specific */
  --color-pymk-title: rgba(0, 0, 0, 0.45);
  --color-pymk-mutual-text: rgba(0, 0, 0, 0.50);
}

/* ===== DARK MODE OVERRIDES ===== */
[data-theme="dark"] {
  /* Background colors */
  --color-bg-page: #000000;
  --color-bg-card: #1a1a1a;
  --color-bg-secondary: #2a2a2a;
  --color-bg-tertiary: #3a3a3a;
  --color-bg-hover: #252525;
  
  /* Text colors */
  --color-text-primary: #e5e5e5;
  --color-text-secondary: #a0a0a0;
  --color-text-tertiary: #707070;
  --color-text-muted: #606060;
  
  /* Border colors */
  --color-border-light: rgba(255, 255, 255, 0.08);
  --color-border-medium: rgba(255, 255, 255, 0.15);
  --color-border-strong: rgba(255, 255, 255, 0.22);
  
  /* Primary/Accent */
  --color-primary: #ffffff;
  
  /* Button styles - Action */
  --color-btn-action: #3d3d3d;
  --color-btn-action-text: #e5e5e5;
  --color-btn-action-hover: #4d4d4d;
  
  /* Button styles - Subtle */
  --color-btn-subtle: #2a2a2a;
  --color-btn-subtle-text: #a0a0a0;
  --color-btn-subtle-hover: #353535;
  
  /* Shadows - lighter and more subtle in dark mode */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.70), 0 4px 16px rgba(0, 0, 0, 0.30);
  --shadow-button: 0 8px 24px rgba(0, 0, 0, 0.6);
  
  /* Error colors - adjusted for dark mode */
  --color-error-bg: rgba(255, 59, 48, 0.15);
  --color-error-border: rgba(255, 59, 48, 0.25);
  --color-error-text: #ff6b6b;
  
  /* Auth page specific */
  --color-auth-bracket: rgba(255, 255, 255, 0.16);
  --color-auth-title: #e5e5e5;
  --color-auth-subtitle: #a0a0a0;
  --color-auth-input-border: rgba(255, 255, 255, 0.15);
  --color-auth-input-border-focus: rgba(255, 255, 255, 0.35);
  --color-auth-input-bg: #1a1a1a;
  
  /* Search page specific */
  --color-search-remove-btn: #606060;
  --color-search-remove-btn-hover: #a0a0a0;
  
  /* Profile page specific */
  --color-profile-bio-bg: transparent;
  --color-profile-stats-separator: rgba(255, 255, 255, 0.15);
  
  /* Activity/Connections specific */
  --color-activity-divider: rgba(255, 255, 255, 0.04);
  --color-activity-unread-dot: #0a84ff;
  
  /* Poll card specific */
  --color-poll-option-border: rgba(255, 255, 255, 0.12);
  --color-poll-option-bg: var(--color-bg-secondary);
  --color-poll-option-hover: rgba(255, 255, 255, 0.05);
  --color-poll-selected-bg: #e5e5e5;
  --color-poll-selected-text: #000000;
  --color-poll-percentage-bg: rgba(255, 255, 255, 0.10);
  --color-poll-percentage: rgba(255, 255, 255, 0.14);
  --color-poll-percentage-mine: rgba(255, 255, 255, 0.32);
  --color-poll-percentage-fill: #e5e5e5;
  --color-poll-bar-fill: #333333;
  
  /* Menu item danger hover */
  --color-menu-danger-hover: rgba(255, 59, 48, 0.15);
  
  /* Create poll modal specific */
  --color-modal-backdrop: rgba(0, 0, 0, 0.70);
  --color-modal-backdrop-heavy: rgba(0, 0, 0, 0.85);
  --color-modal-card-shadow: rgba(0, 0, 0, 0.60);
  
  /* Edit profile specific */
  --color-edit-title: rgba(255, 255, 255, 0.45);
  --color-edit-input-border-focus: rgba(255, 255, 255, 0.25);
  --color-edit-locked-border: rgba(255, 255, 255, 0.10);
  
  /* PYMK specific */
  --color-pymk-title: rgba(255, 255, 255, 0.45);
  --color-pymk-mutual-text: rgba(255, 255, 255, 0.50);
}

/* =====================================================
   GLOBAL FOLLOW BUTTON — Extro style
   ===================================================== */
.follow-btn,
.activityFollowBtn,
.searchPage .follow-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 800;
  font-family: inherit;
  border-radius: 10px;
  border: none;
  background: var(--color-btn-action);
  color: var(--color-btn-action-text);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  text-align: center;
  line-height: 1;
  transition: opacity 100ms ease, background 100ms ease;
  -webkit-tap-highlight-color: transparent;
}

.follow-btn:hover,
.activityFollowBtn:hover,
.searchPage .follow-btn:hover{
  opacity: 0.85;
}

.follow-btn:active,
.activityFollowBtn:active,
.searchPage .follow-btn:active{
  transform: scale(0.96);
}

/* Following state — gray outline */
.follow-btn.following,
.searchPage .follow-btn.following,
.activityFollowState{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 88px;
  padding: 7px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  border-radius: 10px;
  border: 1px solid var(--color-border-medium);
  background: var(--color-bg-secondary);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  transition: background 100ms ease, color 100ms ease;
  text-decoration: none;
}

.follow-btn.following:hover,
.searchPage .follow-btn.following:hover{
  background: var(--color-bg-hover);
  color: var(--color-text-primary);
}

/* Mobile: slightly smaller */
@media (max-width: 600px){
  .follow-btn,
  .activityFollowBtn,
  .searchPage .follow-btn{
    min-width: 76px;
    padding: 7px 16px;
    font-size: 12px;
    border-radius: 8px;
  }
  .follow-btn.following,
  .searchPage .follow-btn.following,
  .activityFollowState{
    min-width: 76px;
    padding: 6px 16px;
    font-size: 12px;
    border-radius: 8px;
  }
}

/* Avatar fade-in — prevents flash on S3 image load */
img[class*="Avatar"],img[class*="avatar"],img[src*="avatars/"],img[src*="default_avatar"]{opacity:0;transition:opacity .15s ease}
img[class*="Avatar"].loaded,img[class*="avatar"].loaded,img[src*="avatars/"].loaded,img[src*="default_avatar"].loaded{opacity:1}