/**
 * RagnarokBox Dark Theme
 * Color palette extracted from appIcon.png
 */

:root {
    /* ============================================
     PRIMARY COLORS (from appIcon)
     ============================================ */

    /* Black/Gray - Primary dark background */
    --color-gray-darkest: #0a0a0a;
    --color-gray-dark: #1a1a1a;
    --color-gray-medium: #2a2a2a;
    --color-gray-light: #3a3a3a;

    /* Muted Gold - Subtle accent color */
    --color-gold-muted: #9b8f5a;
    --color-gold-medium: #8b7f4a;

    /* Olive/Sage - Secondary accent */
    --color-olive: #5f684f;

    /* ============================================
     EXTENDED PALETTE
     ============================================ */

    /* Background shades */
    --color-bg-darkest: #0a0a0a;
    --color-bg-dark: #1a1a1a;
    --color-bg-medium: #2a2a2a;
    --color-bg-light: #3a3a3a;
    --color-bg-overlay: rgba(26, 26, 26, 0.95);

    /* Gold variations for different uses */
    --color-accent-gold: #9b8f5a;
    --color-accent-gold-hover: #aba080;
    --color-accent-gold-dark: #7a6f45;

    /* Text colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b8b8b8;
    --color-text-muted: #808080;
    --color-text-gold: #9b8f5a;

    /* Border colors */
    --color-border-subtle: rgba(155, 143, 90, 0.15);
    --color-border-medium: rgba(155, 143, 90, 0.3);
    --color-border-strong: rgba(155, 143, 90, 0.6);

    /* Status colors */
    --color-success: #4caf50;
    --color-error: #f44336;
    --color-warning: #ff9800;
    --color-info: #2196f3;

    /* ============================================
     SEMANTIC COLOR ASSIGNMENTS
     ============================================ */

    /* Backgrounds */
    --bg-body: var(--color-bg-dark);
    --bg-section-alt: var(--color-bg-medium);
    --bg-card: var(--color-bg-light);
    --bg-hero: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);

    /* Buttons */
    --btn-primary-bg: var(--color-accent-gold);
    --btn-primary-bg-hover: var(--color-accent-gold-hover);
    --btn-primary-text: var(--color-bg-darkest);
    --btn-secondary-bg: transparent;
    --btn-secondary-border: var(--color-accent-gold);
    --btn-secondary-text: var(--color-accent-gold);

    /* Links */
    --link-color: var(--color-accent-gold);
    --link-hover: var(--color-accent-gold-hover);

    /* ============================================
     TYPOGRAPHY
     ============================================ */

    --font-primary:
        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
        sans-serif;
    --font-heading: "Poppins", var(--font-primary);
    --font-mono: "Fira Code", "Courier New", monospace;

    --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: 1.875rem; /* 30px */
    --font-size-4xl: 2.25rem; /* 36px */
    --font-size-5xl: 3rem; /* 48px */
    --font-size-6xl: 3.75rem; /* 60px */

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* ============================================
     SPACING
     ============================================ */

    --spacing-xs: 0.25rem; /* 4px */
    --spacing-sm: 0.5rem; /* 8px */
    --spacing-md: 1rem; /* 16px */
    --spacing-lg: 1.5rem; /* 24px */
    --spacing-xl: 2rem; /* 32px */
    --spacing-2xl: 3rem; /* 48px */
    --spacing-3xl: 4rem; /* 64px */
    --spacing-4xl: 6rem; /* 96px */
    --spacing-5xl: 8rem; /* 128px */

    /* ============================================
     BORDERS & RADIUS
     ============================================ */

    --border-radius-sm: 0.25rem; /* 4px */
    --border-radius-md: 0.5rem; /* 8px */
    --border-radius-lg: 1rem; /* 16px */
    --border-radius-xl: 1.5rem; /* 24px */
    --border-radius-full: 9999px;

    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* ============================================
     SHADOWS
     ============================================ */

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md:
        0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg:
        0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
    --shadow-xl:
        0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
    --shadow-gold: 0 0 20px rgba(155, 143, 90, 0.2);
    --shadow-gold-strong: 0 0 30px rgba(155, 143, 90, 0.3);

    /* ============================================
     ANIMATIONS & TRANSITIONS
     ============================================ */

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

    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

    /* ============================================
     Z-INDEX LAYERS
     ============================================ */

    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;

    /* ============================================
     BREAKPOINTS (for reference in media queries)
     ============================================ */

    --breakpoint-sm: 640px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 1024px;
    --breakpoint-xl: 1280px;
    --breakpoint-2xl: 1536px;

    /* ============================================
     LAYOUT
     ============================================ */

    --container-max-width: 1200px;
    --container-padding: var(--spacing-lg);
    --section-padding-y: var(--spacing-4xl);
    --section-padding-y-mobile: var(--spacing-3xl);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-gold {
    color: var(--color-accent-gold);
}

.text-muted {
    color: var(--color-text-muted);
}

.bg-navy {
    background-color: var(--color-bg-dark);
}

.bg-navy-medium {
    background-color: var(--color-bg-medium);
}

.border-gold {
    border-color: var(--color-accent-gold);
}

.shadow-gold {
    box-shadow: var(--shadow-gold);
}

.glow-gold {
    text-shadow: 0 0 10px rgba(197, 179, 88, 0.5);
}

/* Gold gradient text effect */
.text-gradient-gold {
    background: linear-gradient(135deg, #9b8f5a 0%, #aba080 50%, #8b7f4a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Animated gradient background */
.bg-gradient-animated {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 50%, #1a1a1a 100%);
    background-size: 200% 200%;
    animation: gradientShift 8s ease infinite;
}

@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Gold shimmer effect */
.shimmer-gold {
    position: relative;
    overflow: hidden;
}

.shimmer-gold::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(155, 143, 90, 0.2),
        transparent
    );
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    100% {
        left: 100%;
    }
}

/* ============================================
   DARK THEME ENHANCEMENTS
   ============================================ */

/* Subtle pattern overlay for backgrounds */
.pattern-overlay {
    position: relative;
}

.pattern-overlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(
        circle at 2px 2px,
        rgba(155, 143, 90, 0.03) 1px,
        transparent 0
    );
    background-size: 40px 40px;
    pointer-events: none;
}

/* Glow effect for interactive elements */
.interactive-glow {
    transition: box-shadow var(--transition-base);
}

.interactive-glow:hover,
.interactive-glow:focus {
    box-shadow: var(--shadow-gold-strong);
}

/* Selection colors */
::selection {
    background-color: var(--color-accent-gold);
    color: var(--color-bg-darkest);
}

::-moz-selection {
    background-color: var(--color-accent-gold);
    color: var(--color-bg-darkest);
}

/* Scrollbar styling (webkit browsers) */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--color-bg-dark);
}

::-webkit-scrollbar-thumb {
    background: var(--color-bg-medium);
    border-radius: var(--border-radius-sm);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-accent-gold-dark);
}