/* =============================================================================
   HOUTINI DESIGN SYSTEM - CSS CUSTOM PROPERTIES
   Single source of truth for all design tokens
   Based on analysis of houtini.ai original design
   ============================================================================= */

/* FontAwesome 6 - Local loading removed, handled by WordPress enqueue */

:root {
  /* ===== BRAND COLORS (Exact matches from original) ===== */
  --houtini-primary: #0066FF;
  --houtini-secondary: #00CC88;
  --houtini-accent-pink: #FF69B4;
  --houtini-accent-cyan: #00CCFF;
  --houtini-accent-purple: #8A2BE2;
  
  /* ===== SEMANTIC COLORS ===== */
  --houtini-success: #00CC88;
  --houtini-warning: #FFC107;
  --houtini-danger: #EF4444;
  --houtini-info: #0066FF;
  
  /* ===== NEUTRAL PALETTE ===== */
  --houtini-white: #FFFFFF;
  --houtini-black: #000000;
  --houtini-gray-50: #FAFAFA;
  --houtini-gray-100: #F5F5F5;
  --houtini-gray-200: #E5E5E5;
  --houtini-gray-300: #D4D4D4;
  --houtini-gray-400: #A3A3A3;
  --houtini-gray-500: #666666;
  --houtini-gray-600: #525252;
  --houtini-gray-700: #404040;
  --houtini-gray-800: #262626;
  --houtini-gray-900: #171717;
  
  /* ===== TEXT COLOR HIERARCHY ===== */
  --houtini-text-primary: #000000;
  --houtini-text-secondary: #666666;
  --houtini-text-tertiary: #999999;
  --houtini-text-muted: #CCCCCC;
  
  /* ===== BACKGROUND COLORS ===== */
  --houtini-bg-primary: #FAFAFA;
  --houtini-bg-white: #FFFFFF;
  --houtini-bg-card: rgba(255, 255, 255, 0.85);
  
  /* ===== SURFACE COLORS (Semantic UI elements) ===== */
  --houtini-surface-primary: #FFFFFF;
  --houtini-surface-secondary: #F8F9FA;
  --houtini-surface-tertiary: #F1F3F4;
  --houtini-surface-elevated: #FFFFFF;
  --houtini-surface-overlay: rgba(255, 255, 255, 0.95);
  
  /* ===== BORDER COLORS ===== */
  --houtini-border-subtle: #E5E7EB;
  --houtini-border-default: #D1D5DB;
  --houtini-border-strong: #9CA3AF;
  --houtini-border-interactive: #0066FF;
  
  /* ===== TYPOGRAPHY ===== */
  --houtini-font-family: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --houtini-font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', monospace;
  
  /* Font sizes - responsive with clamp() */
  --houtini-font-size-xs: 0.75rem;    /* 12px */
  --houtini-font-size-sm: 0.875rem;   /* 14px */
  --houtini-font-size-base: 1rem;     /* 16px */
  --houtini-font-size-lg: 1.125rem;   /* 18px */
  --houtini-font-size-xl: 1.25rem;    /* 20px */
  --houtini-font-size-2xl: 1.5rem;    /* 24px */
  --houtini-font-size-3xl: 2rem;      /* 32px */
  --houtini-font-size-4xl: 2.5rem;    /* 40px */
  --houtini-font-size-5xl: 3rem;      /* 48px */
  
  /* Hero typography - specific to match original */
  --houtini-hero-title: clamp(2.5rem, 5vw, 4rem);
  --houtini-hero-subtitle: clamp(1.25rem, 3vw, 1.5rem);
  --houtini-hero-line-height: 1.2;
  
  /* Section headings */
  --houtini-section-title: clamp(1.75rem, 3vw, 2.25rem);
  --houtini-card-title: 1.25rem;
  
  /* Font weights */
  --houtini-font-weight-normal: 400;
  --houtini-font-weight-medium: 500;
  --houtini-font-weight-semibold: 600;
  --houtini-font-weight-bold: 700;
  
  /* Line heights */
  --houtini-line-height-tight: 1.25;
  --houtini-line-height-normal: 1.5;
  --houtini-line-height-relaxed: 1.7;
  
  /* Letter spacing for headings */
  --houtini-heading-tracking: -0.025em;
  
  /* ===== SPACING SCALE ===== */
  --houtini-spacing-xs: 0.5rem;    /* 8px */
  --houtini-spacing-sm: 1rem;      /* 16px */
  --houtini-spacing-md: 1.5rem;    /* 24px */
  --houtini-spacing-lg: 2rem;      /* 32px */
  --houtini-spacing-xl: 3rem;      /* 48px */
  --houtini-spacing-2xl: 4rem;     /* 64px */
  --houtini-spacing-3xl: 6rem;     /* 96px */
  
  /* ===== BORDER RADIUS ===== */
  --houtini-radius-sm: 8px;
  --houtini-radius-md: 12px;
  --houtini-radius-lg: 16px;
  --houtini-radius-xl: 24px;
  
  /* Border radius aliases for consistency */
  --houtini-border-radius-sm: 8px;
  --houtini-border-radius-md: 12px;
  --houtini-border-radius-lg: 16px;
  --houtini-border-radius-xl: 24px;
  
  /* ===== SHADOWS (Matching original sophistication) ===== */
  --houtini-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  --houtini-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --houtini-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --houtini-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
  
  /* Advanced shadows for glass morphism */
  --houtini-shadow-glass: 
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 8px 32px rgba(0, 204, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --houtini-shadow-glass-hover: 
    0 32px 80px rgba(0, 0, 0, 0.16),
    0 12px 40px rgba(0, 102, 255, 0.12);
  
  /* ===== GLASS MORPHISM ===== */
  --houtini-glass-bg-light: rgba(255, 255, 255, 0.85);
  --houtini-glass-bg-dark: rgba(26, 26, 26, 0.85);
  --houtini-glass-blur: blur(20px);
  --houtini-glass-border-light: rgba(255, 255, 255, 0.3);
  --houtini-glass-border-dark: rgba(255, 255, 255, 0.1);
  
  /* ===== GRADIENTS (From original design) ===== */
  --houtini-gradient-primary: linear-gradient(135deg, #0066FF, #00CC88);
  --houtini-gradient-secondary: linear-gradient(135deg, #00CCFF, #8A2BE2);
  --houtini-gradient-accent: linear-gradient(135deg, #FF69B4, #00CCFF);
  --houtini-gradient-rainbow: linear-gradient(90deg, #00CCFF, #FF69B4);
  --houtini-gradient-neon: linear-gradient(90deg, #FF69B4, #00CCFF);
  
  /* Button specific gradients */
  --houtini-gradient-btn-primary: linear-gradient(135deg, #00CCFF, #8A2BE2);
  --houtini-gradient-btn-primary-hover: linear-gradient(135deg, #FF69B4, #00CCFF);
  --houtini-gradient-btn-secondary-hover: linear-gradient(135deg, #00CCFF, #FF69B4);
  
  /* Text gradient for headings */
  --houtini-gradient-text: linear-gradient(135deg, #0066FF, #8A2BE2);
  
  /* ===== TRANSITIONS ===== */
  --houtini-transition-fast: 0.2s ease;
  --houtini-transition-normal: 0.3s ease;
  --houtini-transition-slow: 0.5s ease;
  --houtini-transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --houtini-transition-bounce: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ===== Z-INDEX LAYERS ===== */
  --houtini-z-dropdown: 1000;
  --houtini-z-sticky: 1020;
  --houtini-z-fixed: 1030;
  --houtini-z-modal-backdrop: 1040;
  --houtini-z-modal: 1050;
  --houtini-z-popover: 1060;
  --houtini-z-tooltip: 1070;
  
  /* ===== ANIMATION DURATIONS ===== */
  --houtini-anim-fade: 0.15s;
  --houtini-anim-collapse: 0.35s;
  --houtini-anim-slide: 0.3s;
  
  /* ===== BREAKPOINTS (for reference in JavaScript) ===== */
  --houtini-bp-xs: 0;
  --houtini-bp-sm: 576px;
  --houtini-bp-md: 768px;
  --houtini-bp-lg: 992px;
  --houtini-bp-xl: 1200px;
  --houtini-bp-xxl: 1400px;
}

/* ===== DARK THEME OVERRIDES ===== */
.light-theme {
  --logo-color: #000000;
}

.dark-theme {
  --logo-color: #FFFFFF;
  --houtini-text-primary: #FFFFFF;
  --houtini-text-secondary: #999999;
  --houtini-text-tertiary: #666666;
  --houtini-text-muted: #444444;
  
  --houtini-bg-primary: #0A0A0A;
  --houtini-bg-white: #1A1A1A;
  --houtini-bg-card: var(--houtini-glass-bg-dark);
  
  /* Dark theme surface colors */
  --houtini-surface-primary: #1A1A1A;
  --houtini-surface-secondary: #262626;
  --houtini-surface-tertiary: #333333;
  --houtini-surface-elevated: #2A2A2A;
  --houtini-surface-overlay: rgba(26, 26, 26, 0.95);
  
  /* Dark theme border colors */
  --houtini-border-subtle: #333333;
  --houtini-border-default: #404040;
  --houtini-border-strong: #525252;
  --houtini-border-interactive: #0066FF;
  
  --houtini-glass-bg: var(--houtini-glass-bg-dark);
  --houtini-glass-border: var(--houtini-glass-border-dark);
}

/* ===== COMPONENT-SPECIFIC VARIABLES ===== */
:root {
  /* Header */
  --houtini-header-height: 100px;
  --houtini-header-height-scrolled: 76px;
  
  /* Logo */
  --houtini-logo-size: 2rem;
  --houtini-logo-underline-height: 3px;
  
  /* Cards */
  --houtini-card-padding: var(--houtini-spacing-xl);
  --houtini-card-padding-mobile: var(--houtini-spacing-lg);
  
  /* Buttons */
  --houtini-btn-padding-y: 14px;
  --houtini-btn-padding-x: 20px;
  --houtini-btn-font-size: var(--houtini-font-size-sm);
  
  /* Email signup */
  --houtini-email-input-padding: 14px 16px;
  --houtini-email-border-radius: 12px;
  
  /* Social icons */
  --houtini-social-icon-size: 40px;
  
  /* Theme toggle */
  --houtini-theme-toggle-size: 56px;
  --houtini-theme-toggle-bottom: 24px;
  --houtini-theme-toggle-right: 24px;
}


/* ===== SPECIAL EFFECTS VARIABLES ===== */
:root {
  /* Glow effects for neon-style elements */
  --houtini-glow-pink: 0 0 8px rgba(255, 105, 180, 0.6);
  --houtini-glow-cyan: 0 0 8px rgba(0, 204, 255, 0.6);
  --houtini-glow-primary: 0 0 20px rgba(0, 102, 255, 0.3);
  --houtini-glow-secondary: 0 0 20px rgba(0, 204, 136, 0.3);
  
  /* Text shadows for hover states */
  --houtini-text-glow-cyan: 0 0 8px rgba(0, 204, 255, 0.6);
  --houtini-text-glow-pink: 0 0 8px rgba(255, 105, 180, 0.5);
  
  /* Box shadows for colored elements */
  --houtini-shadow-primary: 0 0 20px rgba(0, 204, 255, 0.2);
  --houtini-shadow-secondary: 0 0 15px rgba(0, 204, 136, 0.2);
  --houtini-shadow-pink: 0 0 25px rgba(255, 105, 180, 0.4);
  
  /* Prompt container specific */
  --houtini-prompt-bg: var(--houtini-white);
  --houtini-prompt-border: #00CCFF;
  --houtini-prompt-shadow: 0 0 20px rgba(0, 204, 255, 0.2);
  --houtini-prompt-text-color: #00CCFF;
  
  /* Compatibility badge specific */
  --houtini-badge-bg: rgba(255, 255, 255, 0.85);
  --houtini-badge-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 8px 32px rgba(0, 204, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ===== ANIMATION KEYFRAMES ===== */
@keyframes neonGlow {
  0%, 100% {
    box-shadow: 0 0 5px #FF69B4, 0 0 10px #FF69B4;
    opacity: 0.8;
  }
  50% {
    box-shadow: 0 0 8px #00CCFF, 0 0 15px #00CCFF;
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes statGlow {
  0% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2) drop-shadow(0 0 10px rgba(0, 204, 255, 0.5));
  }
  100% {
    filter: brightness(1);
  }
}

@keyframes connectionPulse {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

@keyframes blink {
  0%, 50% {
    opacity: 1;
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes codeFloat {
  0%, 100% {
    transform: translateY(0px) translateX(0px);
    opacity: 0.4;
  }
  50% {
    transform: translateY(-10px) translateX(5px);
    opacity: 0.8;
  }
}

/* Typing cursor animation for prompt */
@keyframes typingBlink {
  0%, 49% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0;
  }
}

/* Additional button and hover animations from original */
@keyframes buttonGlow {
  0% {
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.25);
  }
  100% {
    box-shadow: 0 6px 20px rgba(0, 102, 255, 0.35);
  }
}

@keyframes buttonGlowSecondary {
  0% {
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 25px rgba(255, 105, 180, 0.4);
  }
}

/* Theme toggle hover animation */
@keyframes themeToggleHover {
  0% {
    background: linear-gradient(135deg, #00CCFF, #8A2BE2);
    box-shadow: 0 4px 20px rgba(0, 204, 255, 0.3);
  }
  100% {
    background: linear-gradient(135deg, #FF69B4, #00CCFF);
    box-shadow: 0 6px 30px rgba(255, 105, 180, 0.5);
  }
}

/* Card hover lift animation */
@keyframes cardLift {
  0% {
    transform: translateY(0);
    box-shadow: 0 8px 30px rgba(0, 204, 255, 0.2);
  }
  100% {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0, 204, 255, 0.3);
  }
}
/* ===== ADDITIONAL TASK-SPECIFIC VARIABLES ===== */
/* These provide exact aliases for task compatibility */
:root {
  /* Task-specific aliases for compatibility */
  --houtini-accent: var(--houtini-accent-pink);     /* #FF69B4 */
  --houtini-purple: var(--houtini-accent-purple);   /* #8A2BE2 */
  --houtini-cyan: var(--houtini-accent-cyan);       /* #00CCFF */
  
  /* Glass effect aliases */
  --houtini-glass-blur: var(--houtini-glass-blur);  /* blur(20px) */
  --houtini-glass-border: var(--houtini-glass-border-light); /* rgba(255, 255, 255, 0.3) */
  --houtini-shadow-glow: var(--houtini-glow-primary); /* 0 0 20px rgba(0, 204, 255, 0.3) */
  
  /* Logo Animation Variables */
  --houtini-logo-gradient: linear-gradient(90deg, #FF69B4, #00CCFF);
  --houtini-code-color: var(--houtini-secondary);
}

/* ===== DARK THEME VARIABLE OVERRIDES ===== */
.dark-theme {
  /* ===== DARK THEME TEXT COLORS ===== */
  --houtini-text-primary: rgba(255, 255, 255, 0.9);
  --houtini-text-secondary: rgba(255, 255, 255, 0.7);
  --houtini-text-tertiary: rgba(255, 255, 255, 0.5);
  --houtini-text-muted: rgba(255, 255, 255, 0.4);
  
  /* ===== DARK THEME BACKGROUNDS ===== */
  --houtini-bg-primary: #1a1a1a;
  --houtini-bg-white: rgba(42, 42, 42, 0.9);
  --houtini-bg-card: rgba(26, 26, 26, 0.85);
  

  
  /* ===== DARK THEME TABLE COLORS ===== */
  --houtini-table-bg: rgba(26, 26, 26, 0.9);
  --houtini-table-border: rgba(255, 255, 255, 0.15);
  --houtini-table-header-bg: rgba(16, 16, 16, 0.9);
  
  /* ===== DARK THEME CODE COLORS ===== */
  --houtini-code-bg: rgba(26, 26, 26, 0.8);
  --houtini-code-border: rgba(255, 255, 255, 0.1);
  
  /* ===== DARK THEME BLOCKQUOTE ===== */
  --houtini-blockquote-bg: linear-gradient(135deg, rgba(26, 26, 26, 0.9), rgba(35, 35, 35, 0.8));
  --houtini-blockquote-border: #0066FF;
}