/**
 * CSS Custom Properties (Variables)
 * Centralizes all design tokens for easy theming and maintenance
 */

:root {
    /* Background Colors */
    --bg-primary: #0a0a0a;
    --bg-secondary: #111111;
    --bg-tertiary: #1a1a1a;
    --bg-card: #161616;
    --bg-elevated: #222222;

    /* Accent Colors */
    --accent: #ff6b00;
    --accent-light: #ff8533;
    --accent-dark: #cc5500;
    --accent-glow: rgba(255, 107, 0, 0.3);

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #a0a0a0;
    --text-muted: #555555;

    /* Status Colors */
    --success: #46d369;
    --error: #e50914;

    /* Typography */
    --font-display: 'Bebas Neue', sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Safe Area Insets (iOS/Android notch support) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    /* Layout Dimensions */
    --nav-height: 56px;
    --header-height: 52px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Border Radius */
    --radius-sm: 3px;
    --radius-md: 6px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 50%;

    /* Shadows */
    --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.5);
    --shadow-toast: 0 6px 24px rgba(0, 0, 0, 0.4);
}