/* ═══════════════════════════════════════
   LoveConnect Theme System v1.8.0
   Light & Night Mode CSS Custom Properties
   ═══════════════════════════════════════ */

/* ═══ LIGHT THEME (default) ═══ */
:root,
[data-theme="light"] {
  /* Background */
  --lc-bg-primary: #F8F9FE;          /* Main page background — soft lavender-white */
  --lc-bg-secondary: #FFFFFF;         /* Cards, panels */
  --lc-bg-tertiary: #F0F1F6;         /* Input fields, subtle sections */
  --lc-bg-overlay: rgba(0,0,0,0.4);  /* Modal overlays */

  /* Brand */
  --lc-brand-primary: #E91E63;        /* Pink — buttons, accents, likes */
  --lc-brand-primary-hover: #C2185B;
  --lc-brand-primary-light: #FCE4EC;  /* Light pink tint for badges */
  --lc-brand-secondary: #7C4DFF;      /* Purple accent */
  --lc-brand-gradient: linear-gradient(135deg, #E91E63, #7C4DFF);

  /* Text */
  --lc-text-primary: #1A1A2E;         /* Headings, main text */
  --lc-text-secondary: #6B7280;       /* Descriptions, captions */
  --lc-text-tertiary: #9CA3AF;        /* Placeholders, timestamps */
  --lc-text-inverse: #FFFFFF;         /* Text on dark/brand backgrounds */

  /* Borders & Shadows */
  --lc-border: #E5E7EB;
  --lc-border-light: #F3F4F6;
  --lc-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --lc-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
  --lc-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
  --lc-shadow-card: 0 2px 16px rgba(0,0,0,0.06);

  /* Status */
  --lc-success: #10B981;
  --lc-error: #EF4444;
  --lc-warning: #F59E0B;
  --lc-info: #3B82F6;

  /* Navigation */
  --lc-nav-bg: #FFFFFF;
  --lc-nav-active: #E91E63;
  --lc-nav-inactive: #9CA3AF;
  --lc-nav-shadow: 0 -2px 10px rgba(0,0,0,0.05);

  /* Chat */
  --lc-chat-sent: #E91E63;
  --lc-chat-sent-text: #FFFFFF;
  --lc-chat-received: #F0F1F6;
  --lc-chat-received-text: #1A1A2E;

  /* Cards */
  --lc-card-bg: #FFFFFF;
  --lc-card-radius: 16px;
  --lc-card-name-bg: rgba(255,255,255,0.85);

  /* Filters */
  --lc-filter-bg: #FFFFFF;
  --lc-filter-active-bg: #1A1A2E;
  --lc-filter-active-text: #FFFFFF;
  --lc-filter-inactive-bg: transparent;
  --lc-filter-inactive-text: #6B7280;
  --lc-filter-border: #E5E7EB;

  /* Legacy compatibility - map old variables to new ones */
  --lc-primary: var(--lc-brand-primary);
  --lc-primary-dark: var(--lc-brand-primary-hover);
  --lc-primary-light: #A78BFA;
  --lc-primary-soft: var(--lc-brand-primary-light);
  --lc-accent: var(--lc-brand-primary);
  --lc-accent-light: #F9A8D4;
  --lc-gradient: var(--lc-brand-gradient);
  --lc-gradient-soft: linear-gradient(135deg, #FCE4EC 0%, #F3E5F5 100%);
  --lc-bg: var(--lc-bg-primary);
  --lc-surface: var(--lc-bg-secondary);
  --lc-surface-raised: var(--lc-bg-secondary);
  --lc-surface-overlay: var(--lc-bg-overlay);
  --lc-text: var(--lc-text-primary);
  --lc-text-muted: var(--lc-text-tertiary);
  --lc-shadow: var(--lc-shadow-md);
  --lc-shadow-primary: 0 4px 14px rgba(233, 30, 99, 0.25);
  --lc-dark: #1A1A2E;
  --lc-body-text: var(--lc-text-primary);
  --lc-link: var(--lc-brand-primary);
  --lc-link-hover: var(--lc-brand-primary-hover);
}

/* ═══ NIGHT THEME ═══ */
[data-theme="night"] {
  --lc-bg-primary: #0D0D1A;
  --lc-bg-secondary: #1A1A2E;
  --lc-bg-tertiary: #252542;
  --lc-bg-overlay: rgba(0,0,0,0.7);

  --lc-brand-primary: #FF4081;
  --lc-brand-primary-hover: #FF80AB;
  --lc-brand-primary-light: rgba(255,64,129,0.15);
  --lc-brand-secondary: #B388FF;
  --lc-brand-gradient: linear-gradient(135deg, #FF4081, #B388FF);

  --lc-text-primary: #F0F0F5;
  --lc-text-secondary: #9CA3AF;
  --lc-text-tertiary: #6B7280;
  --lc-text-inverse: #0D0D1A;

  --lc-border: #2D2D4A;
  --lc-border-light: #1F1F3A;
  --lc-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --lc-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
  --lc-shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
  --lc-shadow-card: 0 2px 16px rgba(0,0,0,0.3);

  --lc-success: #34D399;
  --lc-error: #F87171;
  --lc-warning: #FBBF24;
  --lc-info: #60A5FA;

  --lc-nav-bg: #1A1A2E;
  --lc-nav-active: #FF4081;
  --lc-nav-inactive: #6B7280;
  --lc-nav-shadow: 0 -2px 10px rgba(0,0,0,0.3);

  --lc-chat-sent: #FF4081;
  --lc-chat-sent-text: #FFFFFF;
  --lc-chat-received: #252542;
  --lc-chat-received-text: #F0F0F5;

  --lc-card-bg: #1A1A2E;
  --lc-card-name-bg: rgba(26,26,46,0.85);

  --lc-filter-bg: #1A1A2E;
  --lc-filter-active-bg: #FF4081;
  --lc-filter-active-text: #FFFFFF;
  --lc-filter-inactive-bg: transparent;
  --lc-filter-inactive-text: #9CA3AF;
  --lc-filter-border: #2D2D4A;

  /* Legacy compatibility - map old variables to new ones */
  --lc-primary: var(--lc-brand-primary);
  --lc-primary-dark: var(--lc-brand-primary-hover);
  --lc-primary-light: #B388FF;
  --lc-primary-soft: var(--lc-brand-primary-light);
  --lc-accent: var(--lc-brand-primary);
  --lc-accent-light: #FF80AB;
  --lc-gradient: var(--lc-brand-gradient);
  --lc-gradient-soft: linear-gradient(135deg, rgba(255,64,129,0.15) 0%, rgba(179,136,255,0.15) 100%);
  --lc-bg: var(--lc-bg-primary);
  --lc-surface: var(--lc-bg-secondary);
  --lc-surface-raised: var(--lc-bg-secondary);
  --lc-surface-overlay: var(--lc-bg-overlay);
  --lc-text: var(--lc-text-primary);
  --lc-text-muted: var(--lc-text-tertiary);
  --lc-shadow: var(--lc-shadow-md);
  --lc-shadow-primary: 0 4px 14px rgba(255, 64, 129, 0.25);
  --lc-dark: #F0F0F5;
  --lc-body-text: var(--lc-text-primary);
  --lc-link: var(--lc-brand-primary);
  --lc-link-hover: var(--lc-brand-primary-hover);
}

/* ═══ THEME TRANSITION ANIMATIONS ═══ */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Disable transitions during theme switch to prevent flash */
.lc-theme-switching * {
  transition: none !important;
}

/* ═══ RESPONSIVE DESIGN TOKENS ═══ */
:root {
  /* Breakpoints */
  --lc-bp-sm: 640px;
  --lc-bp-md: 768px;
  --lc-bp-lg: 1024px;
  --lc-bp-xl: 1280px;

  /* Layout */
  --lc-header-height: 64px;
  --lc-nav-height: 60px;
  --lc-safe-area-top: env(safe-area-inset-top, 0px);
  --lc-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --lc-safe-area-left: env(safe-area-inset-left, 0px);
  --lc-safe-area-right: env(safe-area-inset-right, 0px);

  /* Typography */
  --lc-font-family: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lc-font-size-xs: 0.75rem;
  --lc-font-size-sm: 0.875rem;
  --lc-font-size-base: 1rem;
  --lc-font-size-lg: 1.125rem;
  --lc-font-size-xl: 1.25rem;
  --lc-font-size-2xl: 1.5rem;
  --lc-font-size-3xl: 1.875rem;
  --lc-font-size-4xl: 2.25rem;

  /* Spacing */
  --lc-space-1: 0.25rem;
  --lc-space-2: 0.5rem;
  --lc-space-3: 0.75rem;
  --lc-space-4: 1rem;
  --lc-space-5: 1.25rem;
  --lc-space-6: 1.5rem;
  --lc-space-8: 2rem;
  --lc-space-10: 2.5rem;
  --lc-space-12: 3rem;
  --lc-space-16: 4rem;

  /* Border radius */
  --lc-radius-sm: 0.375rem;
  --lc-radius: 0.5rem;
  --lc-radius-md: 0.75rem;
  --lc-radius-lg: 1rem;
  --lc-radius-xl: 1.5rem;
  --lc-radius-2xl: 2rem;
  --lc-radius-full: 9999px;

  /* Z-index scale */
  --lc-z-dropdown: 10;
  --lc-z-sticky: 20;
  --lc-z-fixed: 30;
  --lc-z-modal-backdrop: 40;
  --lc-z-modal: 50;
  --lc-z-popover: 60;
  --lc-z-tooltip: 70;
  --lc-z-toast: 80;

  /* Animation */
  --lc-transition-fast: 150ms;
  --lc-transition-base: 200ms;
  --lc-transition-slow: 300ms;
  --lc-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --lc-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --lc-ease-in: cubic-bezier(0.4, 0, 1, 1);
}

/* ═══ MOBILE RESPONSIVE ADJUSTMENTS ═══ */
@media (max-width: 767px) {
  :root {
    --lc-header-height: 56px;
    --lc-nav-height: 60px;
  }
}

/* ═══ DESKTOP RESPONSIVE ADJUSTMENTS ═══ */
@media (min-width: 1024px) {
  :root {
    --lc-header-height: 72px;
  }
}

/* ═══ PREFERS COLOR SCHEME SUPPORT ═══ */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --lc-bg-primary: #0D0D1A;
    --lc-bg-secondary: #1A1A2E;
    --lc-bg-tertiary: #252542;
    --lc-bg-overlay: rgba(0,0,0,0.7);

    --lc-brand-primary: #FF4081;
    --lc-brand-primary-hover: #FF80AB;
    --lc-brand-primary-light: rgba(255,64,129,0.15);
    --lc-brand-secondary: #B388FF;
    --lc-brand-gradient: linear-gradient(135deg, #FF4081, #B388FF);

    --lc-text-primary: #F0F0F5;
    --lc-text-secondary: #9CA3AF;
    --lc-text-tertiary: #6B7280;
    --lc-text-inverse: #0D0D1A;

    --lc-border: #2D2D4A;
    --lc-border-light: #1F1F3A;
    --lc-shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --lc-shadow-md: 0 4px 12px rgba(0,0,0,0.4);
    --lc-shadow-lg: 0 8px 30px rgba(0,0,0,0.5);
    --lc-shadow-card: 0 2px 16px rgba(0,0,0,0.3);

    --lc-success: #34D399;
    --lc-error: #F87171;
    --lc-warning: #FBBF24;
    --lc-info: #60A5FA;

    --lc-nav-bg: #1A1A2E;
    --lc-nav-active: #FF4081;
    --lc-nav-inactive: #6B7280;
    --lc-nav-shadow: 0 -2px 10px rgba(0,0,0,0.3);

    --lc-chat-sent: #FF4081;
    --lc-chat-sent-text: #FFFFFF;
    --lc-chat-received: #252542;
    --lc-chat-received-text: #F0F0F5;

    --lc-card-bg: #1A1A2E;
    --lc-card-name-bg: rgba(26,26,46,0.85);

    --lc-filter-bg: #1A1A2E;
    --lc-filter-active-bg: #FF4081;
    --lc-filter-active-text: #FFFFFF;
    --lc-filter-inactive-bg: transparent;
    --lc-filter-inactive-text: #9CA3AF;
    --lc-filter-border: #2D2D4A;

    /* Legacy compatibility */
    --lc-primary: var(--lc-brand-primary);
    --lc-primary-dark: var(--lc-brand-primary-hover);
    --lc-primary-light: #B388FF;
    --lc-primary-soft: var(--lc-brand-primary-light);
    --lc-accent: var(--lc-brand-primary);
    --lc-accent-light: #FF80AB;
    --lc-gradient: var(--lc-brand-gradient);
    --lc-gradient-soft: linear-gradient(135deg, rgba(255,64,129,0.15) 0%, rgba(179,136,255,0.15) 100%);
    --lc-bg: var(--lc-bg-primary);
    --lc-surface: var(--lc-bg-secondary);
    --lc-surface-raised: var(--lc-bg-secondary);
    --lc-surface-overlay: var(--lc-bg-overlay);
    --lc-text: var(--lc-text-primary);
    --lc-text-muted: var(--lc-text-tertiary);
    --lc-shadow: var(--lc-shadow-md);
    --lc-shadow-primary: 0 4px 14px rgba(255, 64, 129, 0.25);
    --lc-dark: #F0F0F5;
    --lc-body-text: var(--lc-text-primary);
    --lc-link: var(--lc-brand-primary);
    --lc-link-hover: var(--lc-brand-primary-hover);
  }
}