/* ========================================
   BASE STYLES - Common across all pages
   This file should be loaded FIRST on every page
   ======================================== */

/* CSS Variables */
:root {
    /* Primary Colors - Golden/Amber Theme */
    --primary-900: #1a0f00;
    --primary-800: #2d1a00;
    --primary-700: #4a2c05;
    --primary-600: #6b4423;
    --primary-500: #b8860b;
    --primary-400: #ffd700;
    --primary-300: #ffe55c;
    --primary-200: #fff1a8;
    --primary-100: #fff9d4;

    /* Accent Colors */
    --accent-gold: #ffd700;
    --accent-amber: #ff9500;
    --accent-orange: #ff6b35;
    --accent-copper: #cd7f32;

    /* Neutral Colors */
    --bg-dark: #0f0a05;
    --bg-card: rgba(255, 215, 0, 0.05);
    --bg-card-hover: rgba(255, 215, 0, 0.1);
    --text-primary: #ffffff;
    --text-secondary: #d4b896;
    --text-tertiary: #8b7355;
    --border-color: rgba(255, 215, 0, 0.15);

    /* Main theme colors (for backwards compatibility) */
    --primary-color: #ffd700;
    --secondary-color: #ff9500;

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #ffd700 0%, #ff9500 100%);
    --gradient-accent: linear-gradient(135deg, #ffd700 0%, #ff6b35 100%);
    --accent-gradient: linear-gradient(135deg, #ffd700 0%, #ff9500 100%);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 150ms ease-in-out;
    --transition-base: 250ms ease-in-out;
    --transition-slow: 350ms ease-in-out;

    /* Shadows */
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4);
    --success: #10b981;
    --danger: #ef4444;
}

/* ========================================
   BASE HTML & BODY - Consistent across all pages
   ======================================== */

html {
    font-size: 16px;
    scroll-behavior: smooth;
    overflow-x: hidden;
    overflow-y: scroll; /* Always show scrollbar to prevent layout shift */
    width: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--bg-dark);
    min-height: 100vh;
    color: var(--text-primary);
    line-height: 1.6;
    background-image: radial-gradient(ellipse at top, rgba(255, 215, 0, 0.1), transparent 50%),
                      radial-gradient(ellipse at bottom, rgba(255, 149, 0, 0.08), transparent 50%);
    overflow-x: hidden;
    width: 100%;
    margin: 0;
    padding: 0;
    position: relative;
}

/* ========================================
   MAIN CONTENT LAYOUT - Consistent across all pages
   ======================================== */

.main-content {
    margin-top: 100px;
    min-height: calc(100vh - 100px);
    padding: 2rem 0 0 0;
    position: relative;
    width: 100%;
}

/* Reset for content areas only - don't affect navigation or footer */
.main-content *,
.main-content *::before,
.main-content *::after {
    box-sizing: border-box;
}

/* ========================================
   COMMON UTILITIES
   ======================================== */

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1a0f00;
}

::-webkit-scrollbar-thumb {
    background: #6b4423;
    border-radius: 9999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #b8860b;
}

/* ========================================
   RESPONSIVE BASE
   ======================================== */

@media (max-width: 768px) {
    .main-content {
        margin-top: 80px;
        min-height: calc(100vh - 80px);
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }
}