/**
 * Liquid Glass Design System
 * CSS Custom Properties for Prompt Hub Redesign
 * 
 * This file defines the foundational design tokens for the liquid glass aesthetic,
 * including colors, glass effects, spacing, sizing, and animation properties.
 */

:root {
  /* ===== COLOR SYSTEM ===== */
  
  /* Background Colors */
  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #050505;
  
  /* Accent Colors */
  --color-accent: #10B981;
  --color-accent-hover: #059669;
  --color-accent-light: #34D399;
  --color-accent-glow: rgba(16, 185, 129, 0.5);
  --color-accent-subtle: rgba(16, 185, 129, 0.1);
  
  /* Text Colors */
  --color-text-primary: rgba(255, 255, 255, 0.95);
  --color-text-secondary: rgba(255, 255, 255, 0.7);
  --color-text-tertiary: rgba(255, 255, 255, 0.5);
  --color-text-disabled: rgba(255, 255, 255, 0.3);
  
  /* Glass Effect Colors */
  --color-glass-bg: rgba(255, 255, 255, 0.05);
  --color-glass-bg-hover: rgba(255, 255, 255, 0.08);
  --color-glass-border: rgba(255, 255, 255, 0.1);
  --color-glass-border-hover: rgba(255, 255, 255, 0.15);
  
  /* ===== GLASS EFFECT SYSTEM ===== */
  
  /* Blur Effects */
  --glass-blur: 12px;
  --glass-blur-strong: 20px;
  --glass-blur-subtle: 8px;
  
  /* Background Opacity */
  --glass-bg-opacity: 0.05;
  --glass-bg-opacity-hover: 0.08;
  --glass-bg-opacity-active: 0.12;
  
  /* Border Opacity */
  --glass-border-opacity: 0.1;
  --glass-border-opacity-hover: 0.15;
  --glass-border-opacity-focus: 0.2;
  
  /* Shadows */
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  --glass-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4);
  --glass-shadow-glow: 0 0 20px var(--color-accent-glow);
  --glass-shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.2), 0 0 20px rgba(16, 185, 129, 0.3);
  
  /* ===== SPACING SYSTEM ===== */
  
  --spacing-xs: 0.5rem;    /* 8px */
  --spacing-sm: 1rem;      /* 16px */
  --spacing-md: 1.5rem;    /* 24px */
  --spacing-lg: 2rem;      /* 32px */
  --spacing-xl: 3rem;      /* 48px */
  --spacing-2xl: 4rem;     /* 64px */
  --spacing-3xl: 6rem;     /* 96px */
  
  /* ===== SIZING SYSTEM ===== */
  
  /* Search Box Heights */
  --size-search-mobile: 48px;
  --size-search-desktop: 56px;
  
  /* Button Heights */
  --size-button-sm: 38px;
  --size-button-md: 44px;
  --size-button-lg: 52px;
  
  /* Touch Targets (Mobile) */
  --size-touch-target: 44px;
  
  /* Hero Section Heights */
  --size-hero-mobile: 50vh;
  --size-hero-desktop: 60vh;
  
  /* Container Max Widths */
  --size-container-sm: 600px;
  --size-container-md: 800px;
  --size-container-lg: 1000px;
  --size-container-xl: 1200px;
  
  /* ===== BORDER RADIUS SYSTEM ===== */
  
  --radius-sm: 0.5rem;     /* 8px */
  --radius-md: 1rem;       /* 16px */
  --radius-lg: 1.5rem;     /* 24px */
  --radius-xl: 2rem;       /* 32px */
  --radius-full: 9999px;   /* Capsule shape - fully rounded ends */
  
  /* ===== ANIMATION TIMING ===== */
  
  /* Duration */
  --transition-fast: 150ms;
  --transition-base: 250ms;
  --transition-slow: 400ms;
  --transition-slower: 600ms;
  
  /* Easing Functions */
  --easing-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --easing-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --easing-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* ===== TYPOGRAPHY SYSTEM ===== */
  
  /* Font Families */
  --font-persian: 'Vazirmatn', sans-serif;
  --font-english: 'Inter', sans-serif;
  --font-fallback: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Font Sizes */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 2rem;      /* 32px */
  --font-size-4xl: 2.5rem;    /* 40px */
  --font-size-5xl: 3rem;      /* 48px */
  
  /* Line Heights */
  --line-height-tight: 1.2;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;
  --line-height-loose: 1.8;
  
  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  /* ===== Z-INDEX SYSTEM ===== */
  
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 100;
  --z-fixed: 500;
  --z-modal-backdrop: 1000;
  --z-modal: 1001;
  --z-popover: 1002;
  --z-tooltip: 1003;
  
  /* ===== BREAKPOINTS (for reference in media queries) ===== */
  
  --breakpoint-mobile: 0px;
  --breakpoint-tablet: 768px;
  --breakpoint-desktop: 1024px;
  --breakpoint-wide: 1440px;
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition-fast: 0.01ms;
    --transition-base: 0.01ms;
    --transition-slow: 0.01ms;
    --transition-slower: 0.01ms;
  }
}

/* ===== DARK MODE ADJUSTMENTS (Future-proofing) ===== */

@media (prefers-color-scheme: dark) {
  :root {
    /* Already optimized for dark mode */
    /* This section can be used for future light mode support */
  }
}

/* ===== UTILITY CLASSES ===== */

/* Glass Container Base Class */
.glass-container {
  background: var(--color-glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-glass-border);
  box-shadow: var(--glass-shadow);
  will-change: transform;
}

/* Glass Container Hover State */
.glass-container:hover {
  background: var(--color-glass-bg-hover);
  border-color: var(--color-glass-border-hover);
}

/* Fallback for browsers without backdrop-filter support */
@supports not (backdrop-filter: blur(12px)) {
  .glass-container {
    background: rgba(17, 17, 17, 0.95);
  }
}

/* Capsule Shape Class */
.capsule {
  border-radius: var(--radius-full);
}

/* GPU Acceleration Hint */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}