/**
 * Vumi Theme System CSS Variables
 *
 * This file defines CSS variables for the Vumi theme system.
 * It includes variables for both light and dark modes, as well as
 * app-specific theme overrides.
 */

:root {
  /* Light mode variables - these are defaults, overridden by app-specific themes */
  --primary: #A13163; /* Primary: red-violet/magenta */
  --primary-foreground: #FFFFFF;
  --secondary: #4B269F; /* Secondary: purple */
  --secondary-foreground: #FFFFFF;

  /* App-specific colors */
  --showcase-primary: #4B269F;
  --showcase-secondary: #F99926;
  --showcase-accent: #FFD700;

  /* Gigs app colors */
  --gigs-primary: #A13163; /* Primary: red-violet/magenta */
  --gigs-secondary: #4B269F; /* Secondary: purple */
  --gigs-accent1: #FB3D25; /* Accent1: red-orange */
  --gigs-accent2: #F99926; /* Accent2: orange */
  --gigs-accent3: #FFD700; /* Accent3: yellow */
  --gigs-accent4: #FFA500; /* Accent4: orange2 */
  --gigs-background: #1A1A1A;
  --gigs-text: #FFFFFF;

  /* Other UI colors */
  --background: #FFFFFF;
  --foreground: #000000;
  --muted: #F1F5F9;
  --muted-foreground: #64748B;
  --card: #FFFFFF;
  --card-foreground: #000000;
  --border: #E2E8F0;
  --input: #E2E8F0;
  --ring: #94A3B8;
}

.dark {
  /* Dark mode variables */
  --primary: #A13163; /* Primary: red-violet/magenta */
  --primary-foreground: #FFFFFF;
  --secondary: #4B269F; /* Secondary: purple */
  --secondary-foreground: #FFFFFF;

  /* App-specific colors remain the same */

  /* Other UI colors */
  --background: #1A1A1A; /* Using Gigs background color */
  --foreground: #FFFFFF;
  --muted: #333333;
  --muted-foreground: #CCCCCC;
  --card: #2A2A2A;
  --card-foreground: #FFFFFF;
  --border: #444444;
  --input: #333333;
  --ring: #A13163;
}

/* App-specific theme overrides */
[data-app-theme="showcase"] {
  --primary: var(--showcase-primary);
  --secondary: var(--showcase-secondary);
  /* Accent color can be used for specific UI elements */
}

[data-app-theme="gigs"] {
  --primary: var(--gigs-primary);
  --primary-foreground: #FFFFFF;
  --secondary: var(--gigs-secondary);
  --secondary-foreground: #FFFFFF;
  --accent1: var(--gigs-accent1);
  --accent2: var(--gigs-accent2);
  --accent3: var(--gigs-accent3);
  --accent4: var(--gigs-accent4);
  --background: var(--gigs-background);
  --foreground: var(--gigs-text);
  /* Override other colors for the gigs app */
  --card: #2A2A2A;
  --card-foreground: #FFFFFF;
  --muted: #333333;
  --muted-foreground: #CCCCCC;
  --ring: var(--gigs-primary);

  /* Button colors */
  --btn-primary-bg: var(--gigs-primary);
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: var(--gigs-secondary);
  --btn-secondary-text: #FFFFFF;
  --btn-accent-bg: var(--gigs-accent1);
  --btn-accent-text: #FFFFFF;
  --btn-white-bg: #FFFFFF;
  --btn-white-text: #1A1A1A;
}