/* Deeprhythms Color System - Centralized Variables */

:root {
  /* Primary Brand Colors */
  --primary: #2563eb;
  --primary-dark: #1d4ed8;
  --primary-light: #3b82f6;

  /* Surface Colors */
  --background: #fafafa;
  --surface: #ffffff;
  --border: #e2e8f0;

  /* Text Colors */
  --dark-text: #0f172a;
  --medium-text: #1e293b;
  --light-text: #475569;

  /* Accent Colors */
  --accent-green: #059669;
  --accent-orange: #ea580c;

  /* Social Media Brand Colors */
  --soundcloud-color: #ff5500;
  --instagram-color: #e1306c;
  --facebook-color: #1877f2;
  --bandcamp-color: #1da0c3;
  --spotify-color: #1db954;
  --apple-color: #000000;

  /* Semantic Colors */
  --success: #059669;
  --warning: #ea580c;
  --error: #dc2626;
  --info: #2563eb;

  /* Overlay Colors */
  --overlay-dark: rgba(0, 0, 0, 0.4);
  --overlay-light: rgba(255, 255, 255, 0.9);
  --overlay-blur: rgba(255, 255, 255, 0.15);
  --overlay-blur-hover: rgba(255, 255, 255, 0.25);

  /* Shadow Colors */
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);
  --shadow-heavy: rgba(0, 0, 0, 0.15);
  --shadow-primary: rgba(37, 99, 235, 0.3);

  /* State Colors with Opacity */
  --primary-bg-light: rgba(37, 99, 235, 0.05);
  --primary-bg-medium: rgba(37, 99, 235, 0.1);
  --primary-border: rgba(37, 99, 235, 0.2);

  --soundcloud-bg: rgba(255, 85, 0, 0.1);
  --soundcloud-bg-hover: rgba(255, 85, 0, 0.2);
  --soundcloud-border: rgba(255, 85, 0, 0.3);

  --success-bg: rgba(5, 150, 105, 0.05);
  --success-bg-medium: rgba(5, 150, 105, 0.1);
  --success-border: rgba(5, 150, 105, 0.2);

  /* White with opacity variations */
  --white-15: rgba(255, 255, 255, 0.15);
  --white-25: rgba(255, 255, 255, 0.25);
  --white-85: rgba(255, 255, 255, 0.85);
  --white-90: rgba(255, 255, 255, 0.9);
  --white-95: rgba(255, 255, 255, 0.95);
  --white-98: rgba(255, 255, 255, 0.98);

  /* Black with opacity variations */
  --black-20: rgba(0, 0, 0, 0.2);
  --black-80: rgba(0, 0, 0, 0.8);

  /* Gray variations */
  --gray-600: #6b7280;
}

/* Dark mode support (future-proofing) */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #0f172a;
    --surface: #1e293b;
    --border: #334155;
    --dark-text: #f8fafc;
    --medium-text: #e2e8f0;
    --light-text: #94a3b8;
    --overlay-light: rgba(0, 0, 0, 0.9);
    --overlay-blur: rgba(0, 0, 0, 0.15);
    --overlay-blur-hover: rgba(0, 0, 0, 0.25);
  }
}