/* Cartographer Core Styles - Forerunner Theme
 * Shared CSS variables, base styles, and animations
 * Used across all pages in the application
 */

/* Define animatable gradient angle properties */
@property --gradient-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --gradient-angle-2 {
    syntax: '<angle>';
    initial-value: 180deg;
    inherits: false;
}

/* ============================================
   CSS VARIABLES - FORERUNNER THEME
   ============================================ */
:root {
    /* Base Metallics - Dark, ancient metal */
    --bg-primary: #0a0e14;
    --bg-secondary: #141920;
    --bg-tertiary: #1a2332;

    /* Panel Backgrounds */
    --bg-panel: rgba(20, 35, 50, 0.6);
    --bg-panel-hover: rgba(30, 50, 70, 0.7);
    --bg-input: rgba(15, 25, 40, 0.8);

    /* Forerunner Cyan (Primary Energy) */
    --cyan-bright: #00e5ff;
    --cyan-medium: #00b8d4;
    --cyan-dark: #006d7a;
    --cyan-glow: rgba(0, 229, 255, 0.4);

    /* Forerunner Orange (Secondary Energy) */
    --orange-bright: #ff9500;
    --orange-medium: #e67e00;
    --orange-dark: #994d00;
    --orange-glow: rgba(255, 149, 0, 0.3);

    /* Text Colors */
    --text-primary: #e8f0f7;
    --text-secondary: #8fa3b8;
    --text-muted: #4a5a6a;
    --text-cyan: #7df9ff;

    /* Status Colors */
    --success: #00e676;
    --warning: #ffc400;
    --error: #ff3d00;

    /* Borders & Dividers */
    --border-subtle: rgba(0, 180, 212, 0.2);
    --border-medium: rgba(0, 180, 212, 0.4);
    --border-bright: rgba(0, 229, 255, 0.6);
    --border-orange: rgba(255, 149, 0, 0.5);

    /* Glass/Holographic Effects */
    --glass-light: rgba(20, 40, 60, 0.3);
    --glass-medium: rgba(20, 40, 60, 0.5);
    --glass-dark: rgba(10, 20, 35, 0.7);

    /* Shadow/Depth */
    --shadow-cyan: 0 0 20px rgba(0, 229, 255, 0.3), 0 0 40px rgba(0, 180, 212, 0.1);
    --shadow-orange: 0 0 20px rgba(255, 149, 0, 0.3), 0 0 40px rgba(230, 126, 0, 0.1);
    --shadow-deep: 0 4px 30px rgba(0, 0, 0, 0.6);

    /* Font Stacks */
    --font-primary: 'Exo 2', 'Rajdhani', sans-serif;
    --font-body: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Monaco, Consolas, monospace;

    /* Legacy compat (for areas not yet updated) */
    --accent: var(--cyan-medium);
    --accent-hover: var(--cyan-bright);
    --border: var(--border-medium);
    --user-bubble: rgba(0, 180, 212, 0.2);
    --assistant-bubble: rgba(20, 35, 50, 0.8);
    --tool-bg: rgba(10, 25, 40, 0.9);
}

/* ============================================
   UNIVERSAL RESETS
   ============================================ */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================
   BASE BODY STYLES
   ============================================ */
body {
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.3px;
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    position: relative;
}

/* Hexagonal background pattern */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 0.05;
    background-image: url('data:image/svg+xml;utf8,<svg width="100" height="87" xmlns="http://www.w3.org/2000/svg"><polygon points="50,10 90,30 90,70 50,90 10,70 10,30" fill="none" stroke="%2300b8d4" stroke-width="1"/></svg>');
    background-size: 100px 87px;
    pointer-events: none;
}

/* Animated energy field */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: radial-gradient(
            circle at 20% 50%,
            rgba(0, 229, 255, 0.03) 0%,
            transparent 40%
    ),
    radial-gradient(
            circle at 80% 50%,
            rgba(255, 149, 0, 0.02) 0%,
            transparent 40%
    );
    animation: energyPulse 8s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes energyPulse {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* ============================================
   SCROLLBAR - FORERUNNER THEMED
   ============================================ */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-left: 1px solid var(--border-subtle);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
            180deg,
            var(--cyan-dark),
            var(--cyan-medium)
    );
    border: 1px solid var(--cyan-medium);
    box-shadow: inset 0 0 6px rgba(0, 229, 255, 0.3);

    /* Angular corners */
    clip-path: polygon(
            0 4px,
            4px 0,
            100% 0,
            100% calc(100% - 4px),
            calc(100% - 4px) 100%,
            0 100%
    );
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
            180deg,
            var(--cyan-medium),
            var(--cyan-bright)
    );
    box-shadow:
            inset 0 0 10px rgba(0, 229, 255, 0.5),
            0 0 10px var(--cyan-glow);
}

/* ============================================
   ACCESSIBILITY - REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

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

/* Text utilities */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-cyan { color: var(--cyan-bright); }
.text-orange { color: var(--orange-bright); }

/* Background utilities */
.bg-primary { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-panel { background: var(--bg-panel); }

/* Layout utilities */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }

/* Spacing utilities */
.p-sm { padding: 8px; }
.p-md { padding: 16px; }
.p-lg { padding: 24px; }
.mt-sm { margin-top: 8px; }
.mt-md { margin-top: 16px; }
.mt-lg { margin-top: 24px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.mb-lg { margin-bottom: 24px; }