/* Light Theme Variables */
:root {
  /* Modern color palette with trending colors */
  --primary: #7c3aed;          /* Vibrant purple */
  --primary-hover: #8b5cf6;    /* Lighter purple on hover */
  --secondary: #6b7280;        /* Modern slate gray */
  --success: #10b981;          /* Fresh mint green */
  --error: #ef4444;            /* Bright red */
  --warning: #f59e0b;          /* Amber orange */
  --info: #3b82f6;             /* Royal blue */
  --accent: #06b6d4;           /* Cyan/teal accent */
  
  /* Background and surface colors */
  --background: #f9fafb;       /* Very light gray, not pure white */
  --surface: #ffffff;          /* White surface */
  --surface-light: #f3f4f6;    /* Light gray for alternating sections */
  --card-bg: #ffffff;          /* Card background */
  --card-hover: #f9fafb;       /* Subtle hover state */
  
  /* Text colors */
  --text: #111827;             /* Almost black, not pure black */
  --text-secondary: #4b5563;   /* Medium gray for secondary text */
  --text-light: #9ca3af;       /* Light gray for tertiary text */
  --text-hover: #ffffff;       /* White text on hover states */
  
  /* Border and shadow */
  --border: rgba(0, 0, 0, 0.08);
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  
  /* Gradient colors */
  --gradient-start: #7c3aed;
  --gradient-end: #06b6d4;
  
  /* Format-specific colors */
  --mp3-color: #10b981;
  --mp4-color: #3b82f6;
}