/** @format */

/* Color Variables for ChatVibe Website */
/* Use these variables instead of hardcoded colors in HTML */

:root {
  /* Primary brand colors */
  --color-primary: #6c42c0;
  --color-primary-dark: #5a359e;
  --color-primary-light: #8b5cf6;

  /* WhatsApp colors */
  --color-whatsapp-dark: #075e54;
  --color-whatsapp-green: #25d366;
  --color-whatsapp-bg: #e5ddd5;

  /* Social media colors */
  --color-facebook: #1877f2;
  --color-google-red: #d93025;

  /* Neutral colors */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-dark: #333333;
  --color-gray: #666666;
  --color-gray-light: #999999;
  --color-gray-lighter: #f5f5f5;
  --color-gray-lightest: #f8f9fa;
  --color-input-bg: #f0f0f0;

  /* Accent colors */
  --color-gold: #ffd700;
  --color-pink: #e91e63;
  --color-pink-light: #ff6b9d;

  /* Transparency utilities */
  --overlay-light: rgba(0, 0, 0, 0.1);
  --overlay-medium: rgba(0, 0, 0, 0.3);
  --overlay-dark: rgba(0, 0, 0, 0.7);
}

/* Utility classes for common color applications */
.text-primary { color: var(--color-primary) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-whatsapp { color: var(--color-whatsapp-green) !important; }
.text-gold { color: var(--color-gold) !important; }

.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-whatsapp { background-color: var(--color-whatsapp-green) !important; }
.bg-whatsapp-dark { background-color: var(--color-whatsapp-dark) !important; }
.bg-whatsapp-bg { background-color: var(--color-whatsapp-bg) !important; }
.bg-facebook { background-color: var(--color-facebook) !important; }
.bg-google-red { background-color: var(--color-google-red) !important; }
.bg-gold { background-color: var(--color-gold) !important; }
.bg-pink { background-color: var(--color-pink) !important; }
.bg-pink-light { background-color: var(--color-pink-light) !important; }
.bg-gray-lightest { background-color: var(--color-gray-lightest) !important; }
.bg-input { background-color: var(--color-input-bg) !important; }

/* Border utilities */
.border-primary { border-color: var(--color-primary) !important; }
.border-whatsapp { border-color: var(--color-whatsapp-green) !important; }