/* File: static/css/core.css */
/* Author: blksmn */
/* Last Updated: 2025-07-11 19:30:00 */

/* ================================================================
   MODERN CORE CSS - ZERO FLASH + ULTRA PERFORMANCE
   ================================================================ */

/* CSS Variables for instant theme switching */
:root {
  /* Dark theme (default) */
  --bg-primary: #111827;
  --bg-secondary: #1f2937;
  --bg-tertiary: #374151;
  --bg-card: #1f2937;
  --bg-input: #374151;
  --bg-overlay: rgba(17, 24, 39, 0.9);
  
  --text-primary: #f9fafb;
  --text-secondary: #e5e7eb;
  --text-muted: #9ca3af;
  --text-inverse: #111827;
  
  --accent-green: #22c55e;
  --accent-green-hover: #16a34a;
  --accent-green-light: #dcfce7;
  --accent-green-dark: #15803d;
  
  --border-color: #374151;
  --border-light: #4b5563;
  --border-focus: #22c55e;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
  
  /* Performance optimizations */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;
  
  /* Z-index scale */
  --z-dropdown: 1000;
  --z-modal: 1500;
  --z-tooltip: 2000;
  --z-loading: 9999;
}

/* Light theme */
.light {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-tertiary: #f3f4f6;
  --bg-card: #ffffff;
  --bg-input: #ffffff;
  --bg-overlay: rgba(255, 255, 255, 0.9);
  
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-muted: #6b7280;
  --text-inverse: #ffffff;
  
  --accent-green-light: #f0fdf4;
  
  --border-color: #e5e7eb;
  --border-light: #d1d5db;
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ================================================================
   RESET & BASE STYLES
   ================================================================ */

/* Modern CSS reset */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  line-height: 1.6;
  transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* Remove default styles */
button, input, optgroup, select, textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button, select {
  text-transform: none;
}

button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
  cursor: pointer;
}

button::-moz-focus-inner, [type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* ================================================================
   PERFORMANCE OPTIMIZATIONS
   ================================================================ */

/* GPU acceleration for smooth animations */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

.will-change-transform {
  will-change: transform;
}

.will-change-opacity {
  will-change: opacity;
}

/* Smooth transitions for theme switching */
.theme-transition {
  transition: 
    background-color var(--transition-normal),
    color var(--transition-normal),
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

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

/* Colors */
.wallet-green { color: var(--accent-green) !important; }
.bg-wallet-green { background-color: var(--accent-green) !important; }
.hover-wallet-green:hover { background-color: var(--accent-green-hover) !important; }
.border-wallet-green { border-color: var(--accent-green) !important; }

/* Text utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }

/* Background utilities */
.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-tertiary { background-color: var(--bg-tertiary); }
.bg-card { background-color: var(--bg-card); }

/* Border utilities */
.border-primary { border-color: var(--border-color); }
.border-light { border-color: var(--border-light); }
.border-focus { border-color: var(--border-focus); }

/* Shadow utilities */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ================================================================
   LOADING & SKELETON STATES
   ================================================================ */

.loading-skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-secondary) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

@keyframes loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.loading-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ================================================================
   FORM ELEMENTS
   ================================================================ */

.form-input {
  background-color: var(--bg-input);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 16px; /* Prevent zoom on iOS */
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  width: 100%;
}

.form-input:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

.form-input::placeholder {
  color: var(--text-muted);
}

.form-button {
  background-color: var(--accent-green);
  color: var(--text-inverse);
  border: none;
  border-radius: 8px;
  padding: 12px 24px;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.form-button:hover {
  background-color: var(--accent-green-hover);
  transform: translateY(-1px);
}

.form-button:active {
  transform: translateY(0);
}

.form-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* ================================================================
   CARD COMPONENTS
   ================================================================ */

.card {
  background-color: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.card-compact {
  padding: 16px;
}

.card-large {
  padding: 32px;
}

/* ================================================================
   BUTTON STYLES
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 16px;
  line-height: 1;
}

.btn-primary {
  background-color: var(--accent-green);
  color: var(--text-inverse);
}

.btn-primary:hover {
  background-color: var(--accent-green-hover);
  transform: translateY(-1px);
}

.btn-secondary {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}

.btn-secondary:hover {
  background-color: var(--border-color);
  border-color: var(--border-light);
}

.btn-ghost {
  background-color: transparent;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.btn-ghost:hover {
  background-color: var(--bg-tertiary);
  color: var(--text-primary);
}

.btn-sm {
  padding: 8px 16px;
  font-size: 14px;
}

.btn-lg {
  padding: 16px 32px;
  font-size: 18px;
}

/* ================================================================
   RESPONSIVE DESIGN
   ================================================================ */

/* Mobile-first breakpoints */
@media (max-width: 320px) {
  /* Very small devices */
  .card {
    padding: 16px;
  }
  
  .btn, .form-input {
    font-size: 16px; /* Prevent zoom on iOS */
  }
}

@media (max-width: 640px) {
  /* Small devices */
  .container-responsive {
    padding-left: 16px;
    padding-right: 16px;
  }
}

@media (min-width: 641px) {
  /* Medium devices and up */
  .container-responsive {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (min-width: 1024px) {
  /* Large devices and up */
  .container-responsive {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ================================================================
   ANIMATION UTILITIES
   ================================================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.9); 
  }
  to { 
    opacity: 1;
    transform: scale(1); 
  }
}

.animate-fade-in {
  animation: fadeIn var(--transition-normal) ease-out;
}

.animate-slide-up {
  animation: slideUp var(--transition-normal) ease-out;
}

.animate-slide-down {
  animation: slideDown var(--transition-normal) ease-out;
}

.animate-scale-in {
  animation: scaleIn var(--transition-normal) ease-out;
}

/* ================================================================
   ACCESSIBILITY
   ================================================================ */

/* Focus styles */
*:focus-visible {
  outline: 2px solid var(--accent-green);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* High contrast support */
@media (prefers-contrast: high) {
  :root {
    --border-color: #000000;
    --text-muted: var(--text-primary);
  }
  
  .light {
    --border-color: #000000;
    --text-muted: var(--text-primary);
  }
}

/* ================================================================
   PRINT STYLES
   ================================================================ */

@media print {
  *, *::before, *::after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  a, a:visited {
    text-decoration: underline;
  }
  
  .btn, .card {
    border: 1px solid #000;
  }
  
  .theme-toggle, .mobile-menu-button {
    display: none !important;
  }
}

/* ================================================================
   PERFORMANCE CRITICAL CLASSES
   ================================================================ */

/* Contain layout for better performance */
.layout-contain {
  contain: layout;
}

.style-contain {
  contain: style;
}

.paint-contain {
  contain: paint;
}

/* Optimize for scrolling performance */
.scroll-optimized {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Image optimization */
.img-optimized {
  object-fit: cover;
  object-position: center;
  image-rendering: crisp-edges;
}

/* Text rendering optimization */
.text-optimized {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}