/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@100..900&family=Michroma&display=swap');

:root{
    /* Colors */
    --bg-primary: #0f1211;
    --bg-secondary: #151a19;
    --bg-transparent: rgba(15, 18, 17, 0.97);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);

    --accent-primary: #f72323;
    --accent-light: #ff3333;
    --accent-dark: #e52020;


    --border-light: rgba(255, 255, 255, 0.05);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-hover: rgba(255, 255, 255, 0.4);
    --overlay-light: rgba(255, 255, 255, 0.1);
    
    /* Shadows */
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);

    --shadow-accent: 0 4px 15px rgba(247, 35, 35, 0.3);
    --shadow-accent-hover: 0 6px 20px rgba(247, 35, 35, 0.4);
    
    /* Typography */
    --font-family: "Michroma", sans-serif;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    
    /* Spacing */
    --space-xs: 5px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 20px;
    --space-xl: 25px;
    --space-xxl: 50px;
    --space-xxxl: 100px;
    
    /* Border radius */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Layout */
    --container-max: 1700px;
    --header-height: 80px;

    /* Dark mode colors (default) */
    --bg-primary: #0f1211;
    --bg-secondary: #151a19;
    --bg-transparent: rgba(15, 18, 17, 0.97);
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.8);
    --border-light: rgba(255, 255, 255, 0.05);
    --border-medium: rgba(255, 255, 255, 0.2);
    --border-hover: rgba(255, 255, 255, 0.4);
    --overlay-light: rgba(255, 255, 255, 0.1);
    --chart-gray: #4d4d4d;

    /* Backwards compatibility with existing CSS */
    --font-main: var(--font-family);
    --font-heading: var(--font-family);
    --font-size-base: 12px;
    
    --spacing-xs: var(--space-xs);
    --spacing-sm: var(--space-sm);
    --spacing-md: var(--space-md);
    --spacing-lg: var(--space-lg);
    --spacing-xl: var(--space-xl);
    
    --border-radius-sm: var(--radius-sm);
    --border-radius-md: var(--radius-md);
    --border-radius-lg: var(--radius-lg);
    
    --primary-color: var(--accent-primary);
    --secondary-color: var(--accent-light);
    --accent-color: var(--accent-dark);
    --background-dark: var(--bg-primary);
    --background-lighter: var(--bg-secondary);
    --text-light: var(--text-primary);
    --text-gray: var(--text-secondary);
    
    --glow-primary: var(--shadow-accent);
    --glow-accent: var(--shadow-accent-hover);
}

