/**
 * Global CSS Variables (Design Tokens)
 * 
 * This file defines all global design tokens used throughout the application.
 * These variables ensure consistent theming and make updates easier.
 * 
 * Table of Contents:
 * 1. Colors
 * 2. Spacing
 * 3. Typography
 * 4. Layout
 * 5. Animation
 * 6. Shadows
 */

:root {
    /* Colors - Core palette
     * Primary: Used for main actions and emphasis
     * Background: Different levels of page background
     * Text: Main content and secondary text colors
     */
    --color-primary: #ff8c00;
    --color-primary-hover: #e07b00;
    --color-background: #1a1a1a;
    --color-surface: #232323;
    --color-surface-variant: #2a2a2a;
    --color-text: #f1f1f1;
    --color-text-secondary: #ccc;

    /* State Colors
     * Used to indicate different states/feedback to users
     * Each color has specific semantic meaning
     */
    --color-error: #f44336;    /* Error/Danger actions */
    --color-success: #4CAF50;  /* Success/Completion */
    --color-info: #2196F3;     /* Information/Help */
    --color-warning: #ff9800;  /* Warning/Caution */

    /* Spacing Scale
     * Following 8-point grid system
     * Used for consistent component spacing
     */
    --space-xs: 0.5rem;  /* 8px - Tight spacing */
    --space-sm: 1rem;    /* 16px - Default spacing */
    --space-md: 1.5rem;  /* 24px - Medium spacing */
    --space-lg: 2rem;    /* 32px - Large spacing */
    --space-xl: 3rem;    /* 48px - Extra large spacing */

    /* Typography
     * Font families and base sizes
     * Maintains consistent text hierarchy
     */
    --font-family-base: 'Roboto', system-ui, sans-serif;
    --font-family-heading: 'Poppins', system-ui, sans-serif;
    --line-height-base: 1.6;
    --font-size-base: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;

    /* Layout
     * Core layout variables for consistent spacing
     * and component sizing
     */
    --container-width: min(95%, 1200px);
    --border-radius-sm: 4px;   /* Small elements */
    --border-radius: 8px;      /* Default radius */
    --border-radius-lg: 12px;  /* Large elements */

    /* Animation Timing
     * Consistent timing for interactive elements
     * Uses standard material design timings
     */
    --animation-timing-short: 150ms;   /* Quick feedback */
    --animation-timing-medium: 300ms;  /* Standard transitions */
    --animation-timing-long: 500ms;    /* Complex animations */
    --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows
     * Elevation levels for components
     * Creates depth in the interface
     */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);   /* Subtle elevation */
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.25);  /* Medium elevation */
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3);  /* High elevation */
    --shadow-primary: 0 4px 15px rgba(255, 140, 0, 0.3);

    /* New gradient variables */
    --gradient-primary: linear-gradient(45deg, #ff8c00, #ffa640);
    --gradient-success: linear-gradient(45deg, #4CAF50, #45a049);
    --gradient-info: linear-gradient(45deg, #2196F3, #1976D2);
    --gradient-danger: linear-gradient(45deg, #f44336, #d32f2f);

    /* Z-index layers */
    --z-base: 1;
    --z-header: 100;
    --z-overlay: 200;
    --z-nav: 300;
    --z-hamburger: 400;
    --z-modal: 500;
    --z-tooltip: 600;

    /* Animation timings */
    --transition-fast: 150ms;
    --transition-base: 300ms;
    --transition-slow: 450ms;
    --transition-bezier: cubic-bezier(0.4, 0, 0.2, 1);

    /* Tile Specific Variables */
    --tile-min-height: 180px;
    --tile-gradient-public: linear-gradient(135deg, #2a2a2a 0%, #333333 100%);
    --tile-gradient-admin: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    --tile-border-hover: rgba(255, 140, 0, 0.5);
    --tile-shadow-hover: 0 8px 24px rgba(255, 140, 0, 0.2);
    --tile-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Enhanced Gradients */
    --gradient-hover: linear-gradient(135deg, 
        rgba(255, 140, 0, 0.1) 0%,
        rgba(255, 140, 0, 0.05) 100%);
    --gradient-active: linear-gradient(135deg,
        rgba(255, 140, 0, 0.15) 0%,
        rgba(255, 140, 0, 0.1) 100%);
}

/* Dark Theme Overrides
 * Automatically applies when user prefers dark theme
 * Adjusts colors for dark mode
 */
@media (prefers-color-scheme: dark) {
    :root {
        --color-background: #1a1a1a;
        --color-surface: #232323;
        --color-surface-variant: #2a2a2a;
        --color-text: #f1f1f1;
        --color-text-secondary: #ccc;
    }
}

/* Accessibility
 * Respects user's motion preferences
 * Disables animations when requested
 */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
    }
}