import React from 'react';

export const COLORS = {
  bg: '#0a0b10',
  bgAlt: '#0f1019',
  primary: '#ff6d5a',
  primaryGlow: '#ff6d5a40',
  secondary: '#7c3aed',
  secondaryGlow: '#7c3aed40',
  accent: '#38bdf8',
  accentGlow: '#38bdf840',
  white: '#f0f0f5',
  gray: '#7a7d8a',
  lightGray: '#b0b3be',
  darkCard: '#14151f',
  cardBorder: '#1f2030',
  discord: '#5865f2',
  imessage: '#34c759',
  telegram: '#26a5e4',
  slack: '#e01e5a',
  whatsapp: '#25d366',
  sms: '#ff6d5a',
  web: '#7c3aed',
  red: '#ef4444',
  green: '#22c55e',
  gold: '#f59e0b',
} as const;

export const GLASS_CARD: React.CSSProperties = {
  background: 'rgba(20, 21, 31, 0.6)',
  backdropFilter: 'blur(24px)',
  WebkitBackdropFilter: 'blur(24px)',
  borderRadius: 20,
  border: '1px solid rgba(255, 255, 255, 0.06)',
  boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04)',
};

export const CARD_STYLE: React.CSSProperties = {
  borderRadius: 16,
  boxShadow: '0 4px 24px rgba(0,0,0,0.3)',
};

export const FONT = "'Inter', -apple-system, BlinkMacSystemFont, sans-serif";

// Spring presets for varied motion
export const SPRING = {
  snappy: { damping: 30, stiffness: 400 },
  smooth: { damping: 25, stiffness: 150 },
  heavy: { damping: 40, stiffness: 100 },
  bouncy: { damping: 12, stiffness: 200 },
  gentle: { damping: 35, stiffness: 120 },
} as const;
