/**
 * Alitar Financial Explorer - Theme
 * Alitar.one Design System
 */

:root {
    /* Backgrounds - Deep black Matrix aesthetic */
    --bg-black: #0d0d0d;
    --bg-primary: #0d0d0d;
    --bg-secondary: #1a1a1a;
    
    /* Accent Colors - Neon green and Terminator red */
    --neon-green: #00ff99;
    --accent-green: #00ff99;
    --terminator-red: #ff0033;
    --accent-red: #ff0033;
    
    /* Text Colors - Metallic gray */
    --metallic-gray: #cccccc;
    --text-primary: #cccccc;
    --text-secondary: #999999;
    
    /* Legacy color mappings for compatibility */
    --color-primary: var(--metallic-gray);
    --color-secondary: var(--text-secondary);
    --color-tertiary: #666666;
    --color-bg: var(--bg-black);
    --color-bg-alt: var(--bg-secondary);
    --color-bg-hover: rgba(26, 26, 26, 0.8);
    --color-border: rgba(0, 255, 153, 0.1);
    --color-accent: var(--neon-green);
    
    /* Typography - Monospace for titles, Sans for body */
    --font-mono: 'Share Tech Mono', 'Courier New', monospace;
    --font-sans: 'Inter', 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    --font-family: var(--font-sans);
    
    /* Font Sizes */
    --font-size-base: 16px;
    --font-size-small: 14px;
    --font-size-large: 18px;
    --font-size-h1: clamp(2rem, 5vw, 3rem);
    --font-size-h2: clamp(1.5rem, 4vw, 2rem);
    --font-size-h3: clamp(1.25rem, 3vw, 1.5rem);
    
    /* Font Weights */
    --font-weight-normal: 300;
    --font-weight-medium: 400;
    --font-weight-bold: 500;
    
    /* Line Heights */
    --line-height-base: 1.9;
    --line-height-tight: 1.6;
    
    /* Spacing */
    --spacing-unit: 1rem;
    --spacing-xs: calc(var(--spacing-unit) * 0.25);
    --spacing-sm: calc(var(--spacing-unit) * 0.5);
    --spacing-md: var(--spacing-unit);
    --spacing-lg: calc(var(--spacing-unit) * 1.5);
    --spacing-xl: calc(var(--spacing-unit) * 2);
    --spacing-xxl: calc(var(--spacing-unit) * 3);
    
    /* Layout */
    --header-height: 60px;
    --sidebar-width: 200px;
    --content-max-width: 1200px;
    
    /* Border radius */
    --border-radius: 4px;
    --border-radius-lg: 12px;
    
    /* Shadows - Glow effects */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --glow-green: 0 0 10px rgba(0, 255, 153, 0.3), 0 0 20px rgba(0, 255, 153, 0.2);
    --glow-red: 0 0 10px rgba(255, 0, 51, 0.3);
    
    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
}

/* Smooth scroll */
html {
    scroll-behavior: smooth;
}