/* ==========================================================================
   Lethal Addons - CSS Custom Properties
   Matching LifeBots Brand Identity
   ========================================================================== */

:root {
    /* ========================================================================
       Brand Colors - LifeBots Palette
       ======================================================================== */
    --la-primary: #635BFF;          /* Purple-blue - main brand */
    --la-secondary: #16CDC7;        /* Teal - secondary accent */
    --la-primary-dark: #4F46E5;     /* Darker primary for hover */
    --la-secondary-dark: #0EA5A0;   /* Darker secondary for hover */

    /* Accent Colors */
    --la-accent-gold: #FFD700;
    --la-accent-orange: #FFA500;
    --la-accent-coral: #FF6B6B;
    --la-success: #13DEB9;
    --la-warning: #FFAE1F;
    --la-danger: #FA896B;
    --la-info: #539BFF;

    /* ========================================================================
       Dark Theme Backgrounds
       ======================================================================== */
    --la-dark-bg: #0d0d0d;
    --la-dark-secondary: #1a1a1a;
    --la-dark-tertiary: #252525;
    --la-dark-card: #1e1e1e;
    --la-dark-elevated: #2a2a2a;

    /* ========================================================================
       Text Colors
       ======================================================================== */
    --la-text-primary: #ffffff;
    --la-text-secondary: rgba(255, 255, 255, 0.85);
    --la-text-muted: rgba(255, 255, 255, 0.6);
    --la-text-disabled: rgba(255, 255, 255, 0.38);

    /* ========================================================================
       Gradients
       ======================================================================== */
    --la-gradient-hero: linear-gradient(135deg, var(--la-primary) 0%, var(--la-secondary) 100%);
    --la-gradient-hero-overlay: linear-gradient(135deg, rgba(99, 91, 255, 0.9) 0%, rgba(22, 205, 199, 0.9) 100%);
    --la-gradient-text: linear-gradient(45deg, #FFD700, #FFA500, #FF6B6B);
    --la-gradient-cta: linear-gradient(45deg, #2196F3, #21CBF3);
    --la-gradient-card: linear-gradient(135deg, rgba(99, 91, 255, 0.1) 0%, rgba(22, 205, 199, 0.1) 100%);
    --la-gradient-dark: linear-gradient(180deg, var(--la-dark-bg) 0%, var(--la-dark-secondary) 100%);

    /* ========================================================================
       Glass Morphism Effects
       ======================================================================== */
    --la-glass-bg: rgba(255, 255, 255, 0.08);
    --la-glass-bg-hover: rgba(255, 255, 255, 0.12);
    --la-glass-border: rgba(255, 255, 255, 0.15);
    --la-glass-border-hover: rgba(255, 255, 255, 0.25);
    --la-backdrop-blur: blur(20px);
    --la-backdrop-blur-strong: blur(40px);

    /* ========================================================================
       Shadows
       ======================================================================== */
    --la-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --la-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.4);
    --la-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --la-shadow-xl: 0 12px 48px rgba(0, 0, 0, 0.6);
    --la-shadow-glow-primary: 0 8px 32px rgba(99, 91, 255, 0.4);
    --la-shadow-glow-secondary: 0 8px 32px rgba(22, 205, 199, 0.4);
    --la-shadow-glow-gold: 0 8px 32px rgba(255, 215, 0, 0.3);

    /* ========================================================================
       Border Radius
       ======================================================================== */
    --la-radius-sm: 8px;
    --la-radius-md: 12px;
    --la-radius-lg: 16px;
    --la-radius-xl: 24px;
    --la-radius-2xl: 32px;
    --la-radius-full: 9999px;

    /* ========================================================================
       Spacing Scale
       ======================================================================== */
    --la-space-xs: 0.25rem;   /* 4px */
    --la-space-sm: 0.5rem;    /* 8px */
    --la-space-md: 1rem;      /* 16px */
    --la-space-lg: 1.5rem;    /* 24px */
    --la-space-xl: 2rem;      /* 32px */
    --la-space-2xl: 3rem;     /* 48px */
    --la-space-3xl: 4rem;     /* 64px */
    --la-space-4xl: 6rem;     /* 96px */

    /* ========================================================================
       Typography
       ======================================================================== */
    --la-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
    --la-font-body: 'Lato', -apple-system, BlinkMacSystemFont, sans-serif;

    --la-text-xs: 0.75rem;    /* 12px */
    --la-text-sm: 0.875rem;   /* 14px */
    --la-text-base: 1rem;     /* 16px */
    --la-text-lg: 1.125rem;   /* 18px */
    --la-text-xl: 1.25rem;    /* 20px */
    --la-text-2xl: 1.5rem;    /* 24px */
    --la-text-3xl: 2rem;      /* 32px */
    --la-text-4xl: 2.5rem;    /* 40px */
    --la-text-5xl: 3rem;      /* 48px */
    --la-text-6xl: 3.5rem;    /* 56px */

    /* ========================================================================
       Transitions
       ======================================================================== */
    --la-transition-fast: 0.15s ease;
    --la-transition-base: 0.3s ease;
    --la-transition-slow: 0.5s ease;
    --la-transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* ========================================================================
       Z-Index Scale
       ======================================================================== */
    --la-z-dropdown: 1000;
    --la-z-sticky: 1020;
    --la-z-fixed: 1030;
    --la-z-modal-backdrop: 1040;
    --la-z-modal: 1050;
    --la-z-popover: 1060;
    --la-z-tooltip: 1070;
}

/* ========================================================================
   Dark Theme Class (applied to body)
   ======================================================================== */
.la-dark-theme {
    background-color: var(--la-dark-bg);
    color: var(--la-text-primary);
}