/* 
 * JustGlow Design Tokens - Master Design System
 * ============================================
 * 
 * This file contains ALL design variables used across JustGlow.
 * These tokens provide a single source of truth for:
 * - Colors (primary, accent, semantic, neutral)
 * - Spacing scale
 * - Typography
 * - Shadows
 * - Border radius
 * - Transitions
 * - Z-index values
 * 
 * BENEFITS:
 * - Easy theme updates (change one value, updates everywhere)
 * - Consistent design across all pages
 * - Better maintainability
 * - Easier to override specific components
 * 
 * USAGE:
 * Use these variables in your CSS like:
 * .my-button {
 *   background: var(--jg-purple-primary);
 *   padding: var(--jg-space-md) var(--jg-space-lg);
 *   border-radius: var(--jg-radius-lg);
 * }
 */

:root {
    /* ========================================
       PRIMARY COLORS - JustGlow Brand Purple
       ========================================
       Unified purple color palette - ONLY these colors
    */
    --primary: #9333ea;              /* Vibrant purple - Main brand color */
    --primary-dark: #7e22ce;         /* Darker purple for hover/focus */
    --accent: #d8b4fe;               /* Light purple accent */
    --white: #ffffff;                /* White */
    --bg-light: #f9fafb;             /* Light background */
    --text-dark: #1f2937;            /* Dark text */
    --text-light: #f3f4f6;           /* Light text for dark backgrounds */
    
    /* Additional purple shades derived from primary palette */
    --purple-primary: var(--primary);
    --purple-dark: var(--primary-dark);
    --purple-light: var(--accent);
    --purple-lighter: #f3e8ff;       /* Very light purple */
    --purple-lightest: #faf5ff;      /* Lightest purple background */
    
    /* Legacy variables for backward compatibility */
    --jg-purple-primary: var(--primary);
    --jg-purple-dark: var(--primary-dark);
    --jg-purple-light: var(--accent);
    --jg-purple-lighter: var(--purple-lighter);
    --jg-purple-lightest: var(--purple-lightest);
    --jg-purple-text: #6b21a8;       /* Text on purple backgrounds */
    
    /* ========================================
       SEMANTIC COLORS - Using Purple Palette Only
       ========================================
       Success, error, warning using purple-based colors
    */
    --jg-color-success: #10b981;     /* Keep green for success (universal) */
    --jg-color-success-bg: #d1fae5;  /* Success background */
    --jg-color-warning: #f59e0b;     /* Keep orange for warning (universal) */
    --jg-color-warning-bg: #fef3c7;  /* Warning background */
    --jg-color-error: #ef4444;       /* Keep red for error (universal) */
    --jg-color-error-bg: #fee2e2;    /* Error background */
    --jg-color-info: var(--primary); /* Info uses primary purple */
    --jg-color-info-bg: var(--purple-lighter); /* Info background */

    /* ========================================
       NEUTRAL COLORS - Text & Backgrounds
       ========================================
       Using unified color palette
    */
    --jg-text-primary: var(--text-dark);      /* Main text color */
    --jg-text-secondary: #6b7280;             /* Secondary text (gray) */
    --jg-text-muted: #9ca3af;                 /* Muted text (lighter gray) */
    --jg-text-inverse: var(--white);          /* Text on dark backgrounds */
    
    --jg-background: var(--white);            /* Main background */
    --jg-background-alt: var(--bg-light);     /* Alternative background */
    --jg-background-light: var(--purple-lightest); /* Light purple background */
    --jg-background-dark: var(--text-dark);   /* Dark background */
    
    --jg-border: #e5e7eb;                     /* Border color (gray) */
    --jg-border-light: #f3f4f6;               /* Light border */
    --jg-border-dark: #d1d5db;                /* Dark border */
    --jg-border-purple: rgba(147, 51, 234, 0.2); /* Purple border with opacity */

    /* ========================================
       SHADOW SCALE - Depth & Elevation
       ========================================
       Consistent shadow sizes for depth
    */
    --jg-shadow-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
    --jg-shadow-sm: 0px 1px 3px 0px rgba(16, 24, 40, 0.1), 
                   0px 1px 2px 0px rgba(16, 24, 40, 0.06);
    --jg-shadow-md: 0px 4px 8px -2px rgba(16, 24, 40, 0.1), 
                   0px 2px 4px -2px rgba(16, 24, 40, 0.06);
    --jg-shadow-lg: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 
                   0px 4px 6px -2px rgba(16, 24, 40, 0.03);
    --jg-shadow-xl: 0px 20px 25px -5px rgba(16, 24, 40, 0.1), 
                   0px 10px 10px -5px rgba(16, 24, 40, 0.04);
    
    /* Colored shadows - Purple palette only */
    --jg-shadow-purple: 0px 8px 25px rgba(147, 51, 234, 0.2);
    --jg-shadow-purple-lg: 0px 12px 40px rgba(147, 51, 234, 0.25);
    --jg-shadow-purple-xl: 0px 20px 60px rgba(147, 51, 234, 0.3);

    /* ========================================
       SPACING SCALE - Consistent Spacing
       ========================================
       Use these for consistent spacing throughout the app
       Scale: 4px, 8px, 12px, 16px, 24px, 32px, 48px, 64px, 96px
    */
    --jg-space-0: 0;
    --jg-space-px: 1px;
    --jg-space-0_5: 2px;
    --jg-space-1: 4px;
    --jg-space-1_5: 6px;
    --jg-space-2: 8px;
    --jg-space-2_5: 10px;
    --jg-space-3: 12px;
    --jg-space-3_5: 14px;
    --jg-space-4: 16px;
    --jg-space-5: 20px;
    --jg-space-6: 24px;
    --jg-space-7: 28px;
    --jg-space-8: 32px;
    --jg-space-9: 36px;
    --jg-space-10: 40px;
    --jg-space-12: 48px;
    --jg-space-14: 56px;
    --jg-space-16: 64px;
    --jg-space-20: 80px;
    --jg-space-24: 96px;
    --jg-space-28: 112px;
    --jg-space-32: 128px;
    --jg-space-36: 144px;
    --jg-space-40: 160px;
    --jg-space-44: 176px;
    --jg-space-48: 192px;
    --jg-space-52: 208px;
    --jg-space-56: 224px;
    --jg-space-60: 240px;
    --jg-space-64: 256px;
    --jg-space-72: 288px;
    --jg-space-80: 320px;
    --jg-space-96: 384px;

    /* ========================================
       BORDER RADIUS - Rounded Corners
       ========================================
       Consistent border radius values
    */
    --jg-radius-none: 0;
    --jg-radius-sm: 4px;
    --jg-radius-md: 8px;
    --jg-radius-lg: 12px;
    --jg-radius-xl: 16px;
    --jg-radius-2xl: 24px;
    --jg-radius-3xl: 32px;
    --jg-radius-full: 9999px;

    /* ========================================
       TYPOGRAPHY SCALE - Font Sizes
       ========================================
       Consistent font sizes using a type scale
    */
    --jg-font-size-xs: 0.75rem;     /* 12px */
    --jg-font-size-sm: 0.875rem;    /* 14px */
    --jg-font-size-base: 1rem;       /* 16px */
    --jg-font-size-lg: 1.125rem;     /* 18px */
    --jg-font-size-xl: 1.25rem;      /* 20px */
    --jg-font-size-2xl: 1.5rem;      /* 24px */
    --jg-font-size-3xl: 1.875rem;    /* 30px */
    --jg-font-size-4xl: 2.25rem;     /* 36px */
    --jg-font-size-5xl: 3rem;        /* 48px */
    --jg-font-size-6xl: 3.75rem;     /* 60px */

    /* Font weights */
    --jg-font-weight-light: 300;
    --jg-font-weight-normal: 400;
    --jg-font-weight-medium: 500;
    --jg-font-weight-semibold: 600;
    --jg-font-weight-bold: 700;
    --jg-font-weight-extrabold: 800;

    /* Line heights */
    --jg-leading-none: 1;
    --jg-leading-tight: 1.25;
    --jg-leading-snug: 1.375;
    --jg-leading-normal: 1.5;
    --jg-leading-relaxed: 1.625;
    --jg-leading-loose: 2;

    /* ========================================
       TRANSITIONS - Animation Timing
       ========================================
       Consistent transition durations and easings
    */
    --jg-transition-instant: 75ms;
    --jg-transition-fast: 150ms;
    --jg-transition-normal: 250ms;
    --jg-transition-slow: 350ms;
    --jg-transition-slower: 500ms;

    /* Easing functions */
    --jg-ease-in: cubic-bezier(0.4, 0, 1, 1);
    --jg-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --jg-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --jg-ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* ========================================
       Z-INDEX SCALE - Layering
       ========================================
       Consistent z-index values for proper layering
    */
    --jg-z-dropdown: 1000;
    --jg-z-sticky: 1020;
    --jg-z-fixed: 1030;
    --jg-z-modal-backdrop: 1040;
    --jg-z-modal: 1050;
    --jg-z-popover: 1060;
    --jg-z-tooltip: 1070;
    --jg-z-notification: 9999;

    /* ========================================
       BREAKPOINTS - Responsive Design
       ========================================
       Media query breakpoints for responsive design
    */
    --jg-breakpoint-xs: 0;
    --jg-breakpoint-sm: 576px;
    --jg-breakpoint-md: 768px;
    --jg-breakpoint-lg: 992px;
    --jg-breakpoint-xl: 1200px;
    --jg-breakpoint-2xl: 1400px;

    /* ========================================
       COMPONENT SPECIFIC
       ========================================
       Variables for specific components
    */
    
    /* Button dimensions */
    --jg-btn-padding-sm: 8px 16px;
    --jg-btn-padding-md: 12px 24px;
    --jg-btn-padding-lg: 16px 32px;
    --jg-btn-height-sm: 36px;
    --jg-btn-height-md: 44px;
    --jg-btn-height-lg: 52px;

    /* Card dimensions */
    --jg-card-padding-sm: 16px;
    --jg-card-padding-md: 24px;
    --jg-card-padding-lg: 32px;

    /* Navbar */
    --jg-navbar-height: 64px;
    --jg-navbar-height-mobile: 56px;

    /* Form elements */
    --jg-input-height: 44px;
    --jg-input-padding: 12px 16px;

    /* ========================================
       GRADIENTS - Purple Palette Only
       ========================================
       All gradients use purple palette
    */
    --jg-gradient-purple: linear-gradient(135deg, var(--primary), var(--primary-dark));
    --jg-gradient-purple-light: linear-gradient(135deg, var(--accent), var(--primary));
    --jg-gradient-purple-vertical: linear-gradient(180deg, var(--primary), var(--primary-dark));
    --jg-gradient-purple-soft: linear-gradient(135deg, var(--purple-lighter), var(--accent));

    /* ========================================
       BACKDROP FILTERS - Blur Effects
       ========================================
       Glassmorphism blur values
    */
    --jg-blur-sm: blur(4px);
    --jg-blur-md: blur(8px);
    --jg-blur-lg: blur(16px);
    --jg-blur-xl: blur(24px);

    /* ========================================
       RESPONSIVE VARIABLES
       ========================================
       Variables that change based on screen size
    */
}

/* Mobile-specific overrides */
@media (max-width: 768px) {
    :root {
        --jg-space-6: 20px;
        --jg-space-8: 28px;
        --jg-space-12: 40px;
        --jg-font-size-4xl: 2rem;
        --jg-font-size-5xl: 2.5rem;
        --jg-font-size-6xl: 3rem;
    }
}

/* Dark mode support (future) */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark mode overrides can be added here when needed */
    }
}