/* CSS Design System and Core Tokens */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&family=Noto+Sans:wght@400;500;600;700&display=swap');

:root {
  /* Dark Glassmorphism Theme (App UI) */
  --bg-app: radial-gradient(circle at top right, #161624, #0a0a0f);
  --panel-bg: rgba(20, 20, 35, 0.45);
  --panel-border: rgba(255, 255, 255, 0.08);
  --panel-blur: blur(16px);
  
  --text-primary: #f3f3f7;
  --text-secondary: #a0a0b0;
  --text-muted: #646478;
  
  --accent-primary: #6366f1;
  --accent-hover: #4f46e5;
  --accent-success: #10b981;
  
  /* Platform Colors */
  --color-youtube: #ff0000;
  --color-tiktok-cyan: #00f2fe;
  --color-tiktok-pink: #fe0979;
  --color-instagram-grad: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  --color-twitter: #1d9bf0;
  --color-reddit: #ff4500;
  --color-facebook: #1877f2;
  --color-threads: #000000;

  --transition-speed: 0.25s;
  --radius-panel: 16px;
  --radius-btn: 8px;
}

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

body {
  font-family: 'Inter', sans-serif;
  background: var(--bg-app);
  color: var(--text-primary);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Scrollbar styles */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}