/* Space Hell Design System - Standardized Variables */

:root {
    /* ========== COLORS ========== */
    /* Primary Colors */
    --color-orange: #FF8C42;
    --color-purple: #9D4EDD;
    --color-dark-purple: #7B2D8E;
    --color-gold: #FFD700;
    --color-blue: #4A9EFF;
    --color-green: #4CAF50;
    --color-red: #ff4444;
    
    /* Neutral Colors */
    --color-black: #0a0a0a;
    --color-dark-bg: #000000;
    --color-card-bg: rgba(10, 10, 10, 0.95);
    --color-card-secondary: rgba(20, 20, 20, 0.8);
    --color-input-bg: rgba(30, 30, 40, 0.6);
    --color-text-primary: #e0e0e0;
    --color-text-secondary: #888;
    
    /* Border Colors */
    --border-orange: rgba(255, 140, 66, 0.3);
    --border-purple: rgba(157, 78, 221, 0.3);
    --border-gold: rgba(255, 215, 0, 0.3);
    --border-light: rgba(255, 255, 255, 0.2);
    
    /* ========== CONTAINER WIDTHS ========== */
    --container-max-width: 1600px;      /* Standard pages */
    --container-wide: 1800px;           /* Data-heavy pages */
    --container-narrow: 1200px;         /* Text-focused pages */
    --container-form: 450px;            /* Login/register forms */
    
    /* ========== SPACING SYSTEM ========== */
    --spacing-xs: 8px;
    --spacing-sm: 12px;
    --spacing-md: 20px;
    --spacing-lg: 30px;
    --spacing-xl: 40px;
    --spacing-2xl: 60px;
    
    /* ========== BORDER RADIUS ========== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 12px;
    
    /* ========== TYPOGRAPHY ========== */
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-base: 1rem;     /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;    /* 24px */
    --font-size-3xl: 2rem;      /* 32px */
    
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;
    
    --letter-spacing-tight: 0.5px;
    --letter-spacing-normal: 1px;
    --letter-spacing-wide: 2px;
    
    /* ========== BUTTONS ========== */
    --btn-padding-sm: 10px 20px;
    --btn-padding-md: 12px 24px;
    --btn-padding-lg: 14px 28px;
    --btn-border-width: 2px;
    --btn-border-radius: var(--radius-md);
    
    /* ========== SHADOWS ========== */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6);
    --shadow-glow-orange: 0 0 20px rgba(255, 140, 66, 0.4);
    --shadow-glow-purple: 0 0 20px rgba(157, 78, 221, 0.4);
    --shadow-glow-gold: 0 0 20px rgba(255, 215, 0, 0.4);
    
    /* ========== TRANSITIONS ========== */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
}

/* Ensure tables and sections utilize full available width */
table {
    width: 100%;
}

.phase-content,
.operations-section,
.marketplace-section,
.contracts-section {
    width: 100%;
    max-width: 100%;
}

/* ========== RESPONSIVE BREAKPOINTS ========== */
@media (max-width: 1920px) {
    :root {
        --container-wide: 1600px;
    }
}

@media (max-width: 1440px) {
    :root {
        --container-max-width: 1400px;
        --container-wide: 1400px;
    }
}

@media (max-width: 1200px) {
    :root {
        --container-max-width: 100%;
        --container-wide: 100%;
        --container-narrow: 100%;
    }
}

@media (max-width: 768px) {
    :root {
        --spacing-md: 15px;
        --spacing-lg: 20px;
        --spacing-xl: 30px;
    }
}