/**
 * BaliBuddy Brand Colors
 * Color palette extracted from the design system
 * Use these CSS variables throughout the application for consistency
 */

:root {
  /* Primary Brand Colors */
  --color-coral: #FF6B8A;
  --color-coral-light: #FFB5C5;
  --color-coral-dark: #E85577;
  --color-coral-accessible: #D63961; /* WCAG AA compliant - 4.52:1 contrast ratio */

  --color-peach: #FFB8A0;
  --color-peach-light: #FFDCD0;
  --color-peach-dark: #FF9E82;

  --color-lavender: #C5A8FF;
  --color-lavender-light: #E5D9FF;
  --color-lavender-dark: #A888E8;

  --color-blue: #6BA6FF;
  --color-blue-light: #A8CAFF;
  --color-blue-dark: #4A8DE8;

  --color-mint: #5FD4D1;
  --color-mint-light: #A0E9E7;
  --color-mint-dark: #3FBFBC;

  /* Background Colors */
  --bg-pink: #FFE8F0;
  --bg-cream: #FFF9F5;
  --bg-light: #FAFBFC;
  --bg-white: #FFFFFF;

  /* Text Colors */
  --text-primary: #1A1A1A;
  --text-secondary: #4A4A4A;
  --text-tertiary: #8A8A8A;
  --text-light: #B0B0B0;
  --text-white: #FFFFFF;

  /* Accent Colors */
  --accent-yellow: #FFD93D;
  --accent-orange: #FF9F43;
  --accent-green: #6BCF7F;
  --accent-red: #FF6B6B;

  /* Neutral Colors */
  --neutral-50: #FAFAFA;
  --neutral-100: #F5F5F5;
  --neutral-200: #E5E5E5;
  --neutral-300: #D4D4D4;
  --neutral-400: #A3A3A3;
  --neutral-500: #737373;
  --neutral-600: #525252;
  --neutral-700: #404040;
  --neutral-800: #262626;
  --neutral-900: #171717;

  /* Gradient Combinations */
  --gradient-coral: linear-gradient(135deg, #FF6B8A 0%, #FFB5C5 100%);
  --gradient-peach: linear-gradient(135deg, #FFB8A0 0%, #FFDCD0 100%);
  --gradient-lavender: linear-gradient(135deg, #C5A8FF 0%, #E5D9FF 100%);
  --gradient-blue: linear-gradient(135deg, #6BA6FF 0%, #A8CAFF 100%);
  --gradient-rainbow: linear-gradient(135deg, #FF6B8A 0%, #FFD93D 50%, #6BA6FF 100%);
  --gradient-sunset: linear-gradient(135deg, #FF9F43 0%, #FF6B8A 100%);

  /* Card Background Colors (from the app screens) */
  --card-pink: #FFD4E0;
  --card-lavender: #D4C8FF;
  --card-peach: #FFD4B8;
  --card-blue: #B8D8FF;

  /* Shadow Colors */
  --shadow-sm: rgba(0, 0, 0, 0.05);
  --shadow-md: rgba(0, 0, 0, 0.1);
  --shadow-lg: rgba(0, 0, 0, 0.15);
  --shadow-xl: rgba(0, 0, 0, 0.2);

  /* Button States */
  --btn-primary: var(--color-blue);
  --btn-primary-hover: var(--color-blue-dark);
  --btn-secondary: var(--neutral-900);
  --btn-secondary-hover: var(--neutral-800);

  /* Border Colors */
  --border-light: #F0F0F0;
  --border-medium: #E0E0E0;
  --border-dark: #CCCCCC;

  /* Status Colors */
  --status-success: #6BCF7F;
  --status-warning: #FFD93D;
  --status-error: #FF6B6B;
  --status-info: #6BA6FF;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-light: #1A1A1A;
    --bg-white: #262626;
    --text-primary: #FFFFFF;
    --text-secondary: #E5E5E5;
    --text-tertiary: #A3A3A3;
  }
}

/* Utility Classes for Quick Color Application */
.bg-coral { background-color: var(--color-coral); }
.bg-peach { background-color: var(--color-peach); }
.bg-lavender { background-color: var(--color-lavender); }
.bg-blue { background-color: var(--color-blue); }
.bg-mint { background-color: var(--color-mint); }

.text-coral { color: var(--color-coral); }
.text-peach { color: var(--color-peach); }
.text-lavender { color: var(--color-lavender); }
.text-blue { color: var(--color-blue); }
.text-mint { color: var(--color-mint); }

.gradient-coral { background: var(--gradient-coral); }
.gradient-peach { background: var(--gradient-peach); }
.gradient-lavender { background: var(--gradient-lavender); }
.gradient-blue { background: var(--gradient-blue); }
.gradient-rainbow { background: var(--gradient-rainbow); }