/*
 * Viddyy Premium Design System
 * Core Variables & Base Styles
 * Version: 2.0
 */

/* ============================================
   CSS VARIABLES - DESIGN TOKENS
   ============================================ */

:root {
  /* === COLOR SYSTEM === */
  
  /* Primary Palette - Electric Indigo */
  --vd-primary: #6366F1;
  --vd-primary-light: #818CF8;
  --vd-primary-dark: #4F46E5;
  --vd-primary-glow: rgba(99, 102, 241, 0.5);
  
  /* Secondary Palette - Hot Pink */
  --vd-secondary: #EC4899;
  --vd-secondary-light: #F472B6;
  --vd-secondary-dark: #DB2777;
  --vd-secondary-glow: rgba(236, 72, 153, 0.5);
  
  /* Accent Palette - Neon Mint */
  --vd-accent: #14F195;
  --vd-accent-light: #6EE7B7;
  --vd-accent-dark: #10B981;
  --vd-accent-glow: rgba(20, 241, 149, 0.5);
  
  /* Dark Palette */
  --vd-dark-900: #0A0A0F;
  --vd-dark-800: #13131A;
  --vd-dark-700: #1C1C26;
  --vd-dark-600: #252532;
  --vd-dark-500: #2E2E3E;
  --vd-dark-400: #3A3A4E;
  
  /* Light Palette */
  --vd-light-100: #FFFFFF;
  --vd-light-200: #F8F9FA;
  --vd-light-300: #E9ECEF;
  --vd-light-400: #DEE2E6;
  --vd-light-500: #CED4DA;
  
  /* Semantic Colors */
  --vd-success: #10B981;
  --vd-warning: #F59E0B;
  --vd-error: #EF4444;
  --vd-info: #3B82F6;
  
  /* Gradient Definitions */
  --vd-gradient-primary: linear-gradient(135deg, var(--vd-primary) 0%, var(--vd-primary-dark) 100%);
  --vd-gradient-secondary: linear-gradient(135deg, var(--vd-secondary) 0%, var(--vd-secondary-dark) 100%);
  --vd-gradient-accent: linear-gradient(135deg, var(--vd-accent) 0%, var(--vd-accent-dark) 100%);
  --vd-gradient-rainbow: linear-gradient(135deg, var(--vd-primary) 0%, var(--vd-secondary) 50%, var(--vd-accent) 100%);
  --vd-gradient-dark: linear-gradient(180deg, var(--vd-dark-800) 0%, var(--vd-dark-900) 100%);
  
  /* === TYPOGRAPHY === */
  
  /* Font Families */
  --vd-font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --vd-font-display: 'Space Grotesk', var(--vd-font-primary);
  --vd-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Font Sizes - Fluid Typography */
  --vd-text-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.875rem);
  --vd-text-sm: clamp(0.875rem, 0.8rem + 0.3vw, 1rem);
  --vd-text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --vd-text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
  --vd-text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --vd-text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --vd-text-3xl: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);
  --vd-text-4xl: clamp(2.25rem, 1.8rem + 2vw, 3rem);
  --vd-text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem);
  --vd-text-6xl: clamp(3.75rem, 3rem + 3vw, 5rem);
  
  /* Font Weights */
  --vd-weight-light: 300;
  --vd-weight-normal: 400;
  --vd-weight-medium: 500;
  --vd-weight-semibold: 600;
  --vd-weight-bold: 700;
  --vd-weight-extrabold: 800;
  
  /* Line Heights */
  --vd-leading-tight: 1.25;
  --vd-leading-normal: 1.5;
  --vd-leading-relaxed: 1.75;
  
  /* === SPACING === */
  
  --vd-space-1: 0.25rem;   /* 4px */
  --vd-space-2: 0.5rem;    /* 8px */
  --vd-space-3: 0.75rem;   /* 12px */
  --vd-space-4: 1rem;      /* 16px */
  --vd-space-5: 1.25rem;   /* 20px */
  --vd-space-6: 1.5rem;    /* 24px */
  --vd-space-8: 2rem;      /* 32px */
  --vd-space-10: 2.5rem;   /* 40px */
  --vd-space-12: 3rem;     /* 48px */
  --vd-space-16: 4rem;     /* 64px */
  --vd-space-20: 5rem;     /* 80px */
  --vd-space-24: 6rem;     /* 96px */
  --vd-space-32: 8rem;     /* 128px */
  
  /* === BORDER RADIUS === */
  
  --vd-radius-sm: 0.375rem;   /* 6px */
  --vd-radius-base: 0.5rem;   /* 8px */
  --vd-radius-md: 0.75rem;    /* 12px */
  --vd-radius-lg: 1rem;       /* 16px */
  --vd-radius-xl: 1.5rem;     /* 24px */
  --vd-radius-2xl: 2rem;      /* 32px */
  --vd-radius-full: 9999px;
  
  /* === SHADOWS === */
  
  --vd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --vd-shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --vd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --vd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --vd-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --vd-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  
  /* Glow Shadows */
  --vd-shadow-glow-primary: 0 0 20px var(--vd-primary-glow), 0 0 40px var(--vd-primary-glow);
  --vd-shadow-glow-secondary: 0 0 20px var(--vd-secondary-glow), 0 0 40px var(--vd-secondary-glow);
  --vd-shadow-glow-accent: 0 0 20px var(--vd-accent-glow), 0 0 40px var(--vd-accent-glow);
  
  /* === GLASSMORPHISM === */
  
  --vd-glass-bg: rgba(255, 255, 255, 0.05);
  --vd-glass-border: rgba(255, 255, 255, 0.1);
  --vd-glass-blur: 40px;
  
  /* === TRANSITIONS === */
  
  --vd-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --vd-transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --vd-transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --vd-transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
  
  /* === Z-INDEX === */
  
  --vd-z-base: 0;
  --vd-z-dropdown: 1000;
  --vd-z-sticky: 1020;
  --vd-z-fixed: 1030;
  --vd-z-modal-backdrop: 1040;
  --vd-z-modal: 1050;
  --vd-z-popover: 1060;
  --vd-z-tooltip: 1070;
  
  /* === BREAKPOINTS === */
  
  --vd-breakpoint-sm: 640px;
  --vd-breakpoint-md: 768px;
  --vd-breakpoint-lg: 1024px;
  --vd-breakpoint-xl: 1280px;
  --vd-breakpoint-2xl: 1536px;
  
  /* === 3D & EFFECTS === */
  
  --vd-perspective: 1200px;
  --vd-transform-scale-hover: 1.05;
  --vd-transform-scale-active: 0.98;
}

/* ============================================
   GLOBAL RESETS & BASE STYLES
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  font-family: var(--vd-font-primary);
  font-size: var(--vd-text-base);
  font-weight: var(--vd-weight-normal);
  line-height: var(--vd-leading-normal);
  color: var(--vd-light-100);
  background: var(--vd-dark-900);
  min-height: 100vh;
  overflow-x: hidden;
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vd-font-display);
  font-weight: var(--vd-weight-bold);
  line-height: var(--vd-leading-tight);
  color: var(--vd-light-100);
}

h1 { font-size: var(--vd-text-5xl); }
h2 { font-size: var(--vd-text-4xl); }
h3 { font-size: var(--vd-text-3xl); }
h4 { font-size: var(--vd-text-2xl); }
h5 { font-size: var(--vd-text-xl); }
h6 { font-size: var(--vd-text-lg); }

p {
  margin-bottom: var(--vd-space-4);
  color: var(--vd-light-300);
}

a {
  color: var(--vd-primary-light);
  text-decoration: none;
  transition: color var(--vd-transition-fast);
}

a:hover {
  color: var(--vd-primary);
}

strong, b {
  font-weight: var(--vd-weight-semibold);
}

code {
  font-family: var(--vd-font-mono);
  font-size: 0.9em;
  padding: 0.2em 0.4em;
  background: var(--vd-glass-bg);
  border-radius: var(--vd-radius-sm);
  border: 1px solid var(--vd-glass-border);
}

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

/* Display */
.vd-hidden { display: none !important; }
.vd-block { display: block !important; }
.vd-inline-block { display: inline-block !important; }
.vd-flex { display: flex !important; }
.vd-inline-flex { display: inline-flex !important; }
.vd-grid { display: grid !important; }

/* Flex Utilities */
.vd-flex-row { flex-direction: row; }
.vd-flex-col { flex-direction: column; }
.vd-items-center { align-items: center; }
.vd-items-start { align-items: flex-start; }
.vd-items-end { align-items: flex-end; }
.vd-justify-center { justify-content: center; }
.vd-justify-between { justify-content: space-between; }
.vd-justify-around { justify-content: space-around; }
.vd-justify-start { justify-content: flex-start; }
.vd-justify-end { justify-content: flex-end; }
.vd-flex-wrap { flex-wrap: wrap; }
.vd-flex-1 { flex: 1; }
.vd-gap-2 { gap: var(--vd-space-2); }
.vd-gap-4 { gap: var(--vd-space-4); }
.vd-gap-6 { gap: var(--vd-space-6); }
.vd-gap-8 { gap: var(--vd-space-8); }

/* Text Alignment */
.vd-text-left { text-align: left; }
.vd-text-center { text-align: center; }
.vd-text-right { text-align: right; }

/* Colors */
.vd-text-primary { color: var(--vd-primary); }
.vd-text-secondary { color: var(--vd-secondary); }
.vd-text-accent { color: var(--vd-accent); }
.vd-text-white { color: var(--vd-light-100); }
.vd-text-gray { color: var(--vd-light-300); }

/* Background Colors */
.vd-bg-primary { background: var(--vd-primary); }
.vd-bg-secondary { background: var(--vd-secondary); }
.vd-bg-dark { background: var(--vd-dark-900); }
.vd-bg-glass { background: var(--vd-glass-bg); }

/* Gradients */
.vd-gradient-primary { background: var(--vd-gradient-primary); }
.vd-gradient-secondary { background: var(--vd-gradient-secondary); }
.vd-gradient-rainbow { background: var(--vd-gradient-rainbow); }

/* Spacing - Margin */
.vd-m-0 { margin: 0; }
.vd-m-auto { margin: auto; }
.vd-mt-4 { margin-top: var(--vd-space-4); }
.vd-mt-8 { margin-top: var(--vd-space-8); }
.vd-mb-4 { margin-bottom: var(--vd-space-4); }
.vd-mb-8 { margin-bottom: var(--vd-space-8); }
.vd-mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing - Padding */
.vd-p-4 { padding: var(--vd-space-4); }
.vd-p-6 { padding: var(--vd-space-6); }
.vd-p-8 { padding: var(--vd-space-8); }
.vd-px-4 { padding-left: var(--vd-space-4); padding-right: var(--vd-space-4); }
.vd-px-6 { padding-left: var(--vd-space-6); padding-right: var(--vd-space-6); }
.vd-py-4 { padding-top: var(--vd-space-4); padding-bottom: var(--vd-space-4); }
.vd-py-6 { padding-top: var(--vd-space-6); padding-bottom: var(--vd-space-6); }

/* Border Radius */
.vd-rounded { border-radius: var(--vd-radius-base); }
.vd-rounded-lg { border-radius: var(--vd-radius-lg); }
.vd-rounded-xl { border-radius: var(--vd-radius-xl); }
.vd-rounded-full { border-radius: var(--vd-radius-full); }

/* Width & Height */
.vd-w-full { width: 100%; }
.vd-h-full { height: 100%; }
.vd-min-h-screen { min-height: 100vh; }

/* Position */
.vd-relative { position: relative; }
.vd-absolute { position: absolute; }
.vd-fixed { position: fixed; }
.vd-sticky { position: sticky; }

/* Overflow */
.vd-overflow-hidden { overflow: hidden; }
.vd-overflow-auto { overflow: auto; }

/* Cursor */
.vd-cursor-pointer { cursor: pointer; }
.vd-cursor-not-allowed { cursor: not-allowed; }

/* Opacity */
.vd-opacity-0 { opacity: 0; }
.vd-opacity-50 { opacity: 0.5; }
.vd-opacity-100 { opacity: 1; }

/* Transitions */
.vd-transition { transition: all var(--vd-transition-base); }
.vd-transition-fast { transition: all var(--vd-transition-fast); }
.vd-transition-slow { transition: all var(--vd-transition-slow); }

/* Transform */
.vd-scale-hover:hover { transform: scale(var(--vd-transform-scale-hover)); }
.vd-translate-y-hover:hover { transform: translateY(-4px); }

/* Shadows */
.vd-shadow { box-shadow: var(--vd-shadow-base); }
.vd-shadow-lg { box-shadow: var(--vd-shadow-lg); }
.vd-shadow-xl { box-shadow: var(--vd-shadow-xl); }
.vd-shadow-glow-primary { box-shadow: var(--vd-shadow-glow-primary); }

/* ============================================
   CONTAINER
   ============================================ */

.vd-container {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--vd-space-4);
  padding-right: var(--vd-space-4);
}

@media (min-width: 640px) {
  .vd-container {
    padding-left: var(--vd-space-6);
    padding-right: var(--vd-space-6);
  }
}

@media (min-width: 1024px) {
  .vd-container {
    padding-left: var(--vd-space-8);
    padding-right: var(--vd-space-8);
  }
}

/* ============================================
   SCROLLBAR STYLING
   ============================================ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--vd-dark-800);
}

::-webkit-scrollbar-thumb {
  background: var(--vd-dark-500);
  border-radius: var(--vd-radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--vd-primary);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--vd-dark-500) var(--vd-dark-800);
}

/* ============================================
   SELECTION
   ============================================ */

::selection {
  background: var(--vd-primary);
  color: var(--vd-light-100);
}

::-moz-selection {
  background: var(--vd-primary);
  color: var(--vd-light-100);
}

/* ============================================
   FOCUS STYLES
   ============================================ */

:focus-visible {
  outline: 2px solid var(--vd-primary);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 2px solid var(--vd-primary);
  outline-offset: 2px;
}

/* ============================================
   RESPONSIVE UTILITIES
   ============================================ */

@media (max-width: 639px) {
  .vd-sm-hidden { display: none !important; }
}

@media (max-width: 767px) {
  .vd-md-hidden { display: none !important; }
}

@media (max-width: 1023px) {
  .vd-lg-hidden { display: none !important; }
}

@media (min-width: 640px) {
  .vd-sm-block { display: block !important; }
  .vd-sm-flex { display: flex !important; }
}

@media (min-width: 768px) {
  .vd-md-block { display: block !important; }
  .vd-md-flex { display: flex !important; }
}

@media (min-width: 1024px) {
  .vd-lg-block { display: block !important; }
  .vd-lg-flex { display: flex !important; }
}