/**
 * Rumble Design System - CSS Variables
 * Brand Colors: Green #B9FF66, Red #F5484D, Violet #9747ff
 *
 * Usage: @import from shared/styles or use var(--rumble-green)
 * Created: 2025-12-12
 */

:root {
  /* ===== BRAND COLORS ===== */

  /* Primary - Lime Green */
  --rumble-green: #B9FF66;
  --rumble-green-light: #d4ff99;
  --rumble-green-dark: #9ee633;
  --rumble-green-muted: rgba(185, 255, 102, 0.2);
  --rumble-green-glow: rgba(185, 255, 102, 0.4);

  /* Accent - Coral Red */
  --rumble-red: #F5484D;
  --rumble-red-light: #ff7a7e;
  --rumble-red-dark: #d93035;
  --rumble-red-muted: rgba(245, 72, 77, 0.2);
  --rumble-red-glow: rgba(245, 72, 77, 0.4);

  /* Secondary - Violet */
  --rumble-violet: #9747ff;
  --rumble-violet-light: #b47aff;
  --rumble-violet-dark: #7c3aed;
  --rumble-violet-muted: rgba(151, 71, 255, 0.2);
  --rumble-violet-glow: rgba(151, 71, 255, 0.4);


  /* ===== SEMANTIC COLORS ===== */

  --color-success: var(--rumble-green);
  --color-error: var(--rumble-red);
  --color-warning: #f59e0b;
  --color-info: #3b82f6;


  /* ===== BACKGROUNDS ===== */

  --bg-primary: #0a0a0a;
  --bg-secondary: #121212;
  --bg-card: #1a1a2e;
  --bg-elevated: #242438;
  --bg-overlay: rgba(0, 0, 0, 0.7);
  --bg-overlay-light: rgba(0, 0, 0, 0.5);


  /* ===== TEXT ===== */

  --text-primary: #ffffff;
  --text-secondary: #a0a0a0;
  --text-muted: #6b7280;
  --text-disabled: #4b5563;
  --text-on-green: #0a0a0a;  /* Dark text on green background */
  --text-on-red: #ffffff;
  --text-on-violet: #ffffff;


  /* ===== BORDERS ===== */

  --border-default: rgba(255, 255, 255, 0.1);
  --border-light: rgba(255, 255, 255, 0.05);
  --border-strong: rgba(255, 255, 255, 0.2);
  --border-focus: var(--rumble-green);


  /* ===== GLASS EFFECT ===== */

  --glass-bg: rgba(18, 18, 18, 0.6);
  --glass-bg-dark: rgba(18, 18, 18, 0.85);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-blur: 8px;
  --glass-blur-strong: 12px;


  /* ===== SHADOWS ===== */

  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);
  --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.4);

  /* Glow Effects */
  --shadow-glow-green: 0 0 20px var(--rumble-green-glow);
  --shadow-glow-red: 0 0 20px var(--rumble-red-glow);
  --shadow-glow-violet: 0 0 20px var(--rumble-violet-glow);


  /* ===== SPACING ===== */

  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;


  /* ===== BORDER RADIUS ===== */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-pill: 9999px;


  /* ===== TRANSITIONS ===== */

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-bounce: 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);


  /* ===== Z-INDEX SCALE ===== */

  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 300;
  --z-modal-backdrop: 400;
  --z-modal: 500;
  --z-popover: 600;
  --z-tooltip: 700;
  --z-toast: 800;
  --z-max: 9999;


  /* ===== GRADIENTS ===== */

  --gradient-green: linear-gradient(135deg, var(--rumble-green) 0%, var(--rumble-green-dark) 100%);
  --gradient-red: linear-gradient(135deg, var(--rumble-red) 0%, var(--rumble-red-dark) 100%);
  --gradient-violet: linear-gradient(135deg, var(--rumble-violet) 0%, var(--rumble-violet-dark) 100%);
  --gradient-brand: linear-gradient(135deg, var(--rumble-violet) 0%, var(--rumble-green) 100%);
}