/* ============================================================================
   AMONG US TECH FEST THEME
   ============================================================================ */

:root {
  /* =========================
     AMONG US COLOR PALETTE
     ========================= */
  --crewmate-red: #FF0000;           /* Impostor Red */
  --crewmate-blue: #0000FF;          /* Crewmate Blue */
  --crewmate-green: #00FF00;         /* Crewmate Green */
  --crewmate-pink: #FF00FF;          /* Crewmate Pink */
  --crewmate-orange: #FFA500;        /* Crewmate Orange */
  --crewmate-yellow: #FFFF00;        /* Crewmate Yellow */
  --crewmate-black: #000000;         /* Crewmate Black */
  --crewmate-white: #FFFFFF;         /* Crewmate White */
  --crewmate-purple: #800080;        /* Crewmate Purple */
  --crewmate-cyan: #00FFFF;          /* Crewmate Cyan */
  --crewmate-lime: #32CD32;          /* Crewmate Lime */
  --crewmate-brown: #8B4513;         /* Crewmate Brown */

  /* =========================
     BRAND COLORS - Among Us Inspired
     ========================= */
  --color-primary: #FF0000;           /* Impostor Red - Primary action */
  --color-primary-hover: #CC0000;     /* Darker Red */
  --color-primary-active: #990000;    /* Even Darker Red */
  --color-primary-light: rgba(255, 0, 0, 0.15);
  --color-primary-border: rgba(255, 0, 0, 0.3);
  
  --color-secondary: #0000FF;         /* Crewmate Blue */
  --color-secondary-hover: #0000CC;
  --color-secondary-active: #000099;
  --color-secondary-light: rgba(0, 0, 255, 0.15);
  
  --color-accent: #00FF00;            /* Crewmate Green */
  --color-accent-hover: #00CC00;
  --color-accent-active: #009900;
  --color-accent-light: rgba(0, 255, 0, 0.15);

  --color-tertiary: #FFFF00;          /* Crewmate Yellow */
  --color-tertiary-hover: #CCCC00;
  --color-tertiary-active: #999900;

  /* =========================
     BACKGROUNDS - Space Theme
     ========================= */
  --bg-main: #0B0F1A;                 /* Deep Space Black */
  --bg-main-gradient: linear-gradient(180deg, #0B0F1A 0%, #1A1F3A 100%);
  --bg-muted: #111827;
  --bg-muted-hover: rgba(255, 255, 255, 0.05);
  --bg-elevated: #1E293B;             /* Space Station Grey */
  --bg-elevated-hover: #273549;
  --bg-elevated-active: #2d3748;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-overlay-light: rgba(0, 0, 0, 0.4);
  --bg-hover: rgba(255, 0, 0, 0.1);   /* Red tint */
  --bg-active: rgba(255, 0, 0, 0.2);
  --bg-selected: rgba(0, 255, 0, 0.15); /* Green for tasks */
  --bg-disabled: rgba(255, 255, 255, 0.05);
  
  --bg-input: #1E293B;
  --bg-input-focus: #273549;
  
  /* =========================
     TEXT COLORS - High Contrast
     ========================= */
  --text-primary: #FFFFFF;
  --text-primary-strong: #FFFFFF;
  --text-primary-muted: rgba(255, 255, 255, 0.9);
  
  --text-secondary: #E5E7EB;
  --text-secondary-muted: rgba(229, 231, 235, 0.8);
  
  --text-muted: #94A3B8;
  --text-muted-strong: #64748B;
  --text-placeholder: #64748B;
  
  --text-inverted: #000000;
  --text-on-primary: #FFFFFF;
  --text-on-accent: #000000;
  --text-on-secondary: #FFFFFF;
  
  --text-link: #00FFFF;               /* Cyan like emergency button */
  --text-link-hover: #00CCCC;
  --text-link-visited: #FF00FF;       /* Pink */

  /* =========================
     STATUS COLORS - Among Us Game States
     ========================= */
  /* Impostor/Alert States */
  --badge-error: #FF0000;             /* Impostor Red */
  --badge-error-bg: rgba(255, 0, 0, 0.15);
  --badge-error-border: rgba(255, 0, 0, 0.3);
  --badge-error-text: #FF6666;
  --badge-error-hover: rgba(255, 0, 0, 0.2);
  
  /* Crewmate/Success States */
  --badge-success: #00FF00;           /* Crewmate Green */
  --badge-success-bg: rgba(0, 255, 0, 0.15);
  --badge-success-border: rgba(0, 255, 0, 0.3);
  --badge-success-text: #66FF66;
  --badge-success-hover: rgba(0, 255, 0, 0.2);
  
  /* Warning/Task States */
  --badge-warning: #FFFF00;           /* Crewmate Yellow */
  --badge-warning-bg: rgba(255, 255, 0, 0.15);
  --badge-warning-border: rgba(255, 255, 0, 0.3);
  --badge-warning-text: #FFFF66;
  --badge-warning-hover: rgba(255, 255, 0, 0.2);
  
  /* Info/Emergency States */
  --badge-info: #00FFFF;              /* Cyan Emergency */
  --badge-info-bg: rgba(0, 255, 255, 0.15);
  --badge-info-border: rgba(0, 255, 255, 0.3);
  --badge-info-text: #66FFFF;
  --badge-info-hover: rgba(0, 255, 255, 0.2);

  /* =========================
     CHART COLORS - Crewmate Colors
     ========================= */
  --chart-1: #FF0000;                 /* Red */
  --chart-2: #0000FF;                 /* Blue */
  --chart-3: #00FF00;                 /* Green */
  --chart-4: #FFFF00;                 /* Yellow */
  --chart-5: #FF00FF;                 /* Pink */
  --chart-6: #00FFFF;                 /* Cyan */
  --chart-7: #FFA500;                 /* Orange */
  --chart-8: #800080;                 /* Purple */
  --chart-9: #32CD32;                 /* Lime */
  --chart-10: #8B4513;                /* Brown */

  /* Keep other variables as needed... */

  
  /* Chart Utilities */
  --chart-grid: #334155;              /* Grid lines */
  --chart-axis: #475569;              /* Axis lines */
  --chart-tooltip-bg: #1e293b;        /* Tooltip background */
  --chart-tooltip-border: #475569;    /* Tooltip border */
  --chart-tooltip-text: #f8fafc;      /* Tooltip text */
  --chart-legend-bg: rgba(30, 41, 59, 0.8); /* Legend background */

  /* =========================
     SHADOWS & ELEVATION
     ========================= */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.9);
  --shadow-2xl: 0 32px 128px rgba(0, 0, 0, 1);
  
  --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-inset-top: inset 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-inset-bottom: inset 0 -2px 4px rgba(0, 0, 0, 0.4);
  
  --shadow-card: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-modal: 0 16px 64px rgba(0, 0, 0, 0.9);
  --shadow-navbar: 0 4px 12px rgba(0, 0, 0, 0.6);
  --shadow-floating: 0 8px 32px rgba(0, 0, 0, 0.8);
  
  --shadow-primary: 0 0 0 3px rgba(96, 165, 250, 0.3);
  --shadow-accent: 0 0 0 3px rgba(74, 222, 128, 0.3);
  --shadow-error: 0 0 0 3px rgba(239, 68, 68, 0.3);
  --shadow-success: 0 0 0 3px rgba(16, 185, 129, 0.3); /* Added */

  /* =========================
     TRANSITIONS & ANIMATIONS (KEPT - these are color-related)
     ========================= */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  
  --animation-fade-in: fadeIn 0.3s ease-out;
  --animation-slide-up: slideUp 0.3s ease-out;
  --animation-slide-down: slideDown 0.3s ease-out;
  --animation-slide-left: slideLeft 0.3s ease-out;
  --animation-slide-right: slideRight 0.3s ease-out;
  --animation-scale: scale 0.2s ease-out;
  --animation-pulse: pulse 2s infinite;
  --animation-spin: spin 1s linear infinite;
}