/* ============================================
   ANYSYNC- CORPORATE DESIGN SYSTEM
   Orange + White + Dark Charcoal
   ============================================ */

:root {
  /* Primary palette */
  --primary: #F26522;
  --primary-dark: #D9551A;
  --primary-light: #FF8C42;
  --primary-soft: rgba(242, 101, 34, 0.08);
  --primary-gradient: linear-gradient(135deg, #F26522 0%, #FF8C42 100%);
  
  /* Neutrals */
  --dark: #1a1a1a;
  --charcoal: #2d2d2d;
  --gray-900: #333333;
  --gray-700: #555555;
  --gray-500: #888888;
  --gray-300: #cccccc;
  --gray-100: #f5f5f5;
  --white: #ffffff;
  
  /* Backgrounds */
  --bg-main: #fafafa;
  --bg-card: #ffffff;
  --bg-section: #f0f0f0;
  
  /* Text */
  --text-primary: #1a1a1a;
  --text-secondary: #555555;
  --text-muted: #888888;
  --text-white: #ffffff;
  
  /* Borders */
  --border-light: #e8e8e8;
  --border-medium: #d0d0d0;
  
  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-xl: 0 16px 48px rgba(0,0,0,0.16);
  
  /* Platform colors (adapted) */
  --ig-color: #E1306C;
  --fb-color: #1877F2;
  --li-color: #0A66C2;
  
  /* Spacing & radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg-main);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ============ BACKGROUND — Clean white with subtle pattern ============ */
.bg-canvas {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: 
    radial-gradient(circle at 20% 50%, rgba(242,101,34,0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(242,101,34,0.02) 0%, transparent 50%),
    linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
}

/* Subtle watermark pattern */
.bg-canvas::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(242,101,34,0.015) 35px, rgba(242,101,34,0.015) 36px),
    repeating-linear-gradient(-45deg, transparent, transparent 35px, rgba(0,0,0,0.01) 35px, rgba(0,0,0,0.01) 36px);
  pointer-events: none;
}

.blob { display: none; } /* Hide animated blobs */
.grain { display: none; } /* Hide grain */

/* ============ CARDS — White with shadow, NO glass ============ */
.glass-panel {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: none;
}

.glass-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-gradient);
  opacity: 0;
  transition: opacity 0.3s ease;
}

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

.glass-card:hover::before {
  opacity: 1;
}

.glass-subpanel {
  background: var(--gray-100);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  backdrop-filter: none;
}

/* ============ GRADIENTS — Orange-based ============ */
.gradient-text {
  color: var(--primary);
  background: none;
  -webkit-text-fill-color: initial;
}

.ig-gradient { background: linear-gradient(135deg, #E1306C, #C13584); }
.fb-gradient { background: linear-gradient(135deg, #1877F2, #0D65D9); }
.li-gradient { background: linear-gradient(135deg, #0A66C2, #004182); }
.blue-gradient { background: linear-gradient(135deg, #3B82F6, #1D4ED8); }
.purple-gradient { background: linear-gradient(135deg, #8B5CF6, #6D28D9); }
.pink-gradient { background: linear-gradient(135deg, #EC4899, #DB2777); }
.orange-gradient { background: var(--primary-gradient); }
.green-gradient { background: linear-gradient(135deg, #10B981, #059669); }

.ig-gradient-soft { background: rgba(225,48,108,0.08); }
.fb-gradient-soft { background: rgba(24,119,242,0.08); }
.li-gradient-soft { background: rgba(10,102,194,0.08); }

/* ============ UTILITIES ============ */
.muted { color: var(--text-muted); }
.hidden { display: none !important; }