/* theme.css - Global Design Variables */

/* 1. Import Fonts (Public Sans for UI, Roboto Mono for data) */
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@400;500;600;700;800&family=Roboto+Mono:wght@400;500&display=swap');

/* 2. Define Global Colors and Shapes */
:root {
    /* Backgrounds */
    --bg:           #0F172A;    
    --card:         #1E293B;    
    --card-border:  rgba(255, 255, 255, 0.05);
    --panel-dark:   #1E293B;    

    /* Brand & Accents */
    --accent:       #2DD4BF;    
    --brand-ochre:  #2DD4BF;    
    --accent-dim:   rgba(45, 212, 191, 0.12);

    /* Semantic colours */
    --green:        #34D399;    
    --neon-green:   #34D399;    
    --red:          #F87171;    
    --neon-red:     #F87171;    
    --yellow:       #FBBF24;    
    
    /* Text */
    --text:         #F8FAFC;    
    --muted:        #94A3B8;    
    --text-muted:   #94A3B8;    
    
    /* Spacing & shape */
    --radius-card:  16px;       
    --radius-btn:   12px;
}

/* 3. Apply Base Fonts */
body { 
    /* We use monospace for the body so your PNL and data tables line up perfectly */
    font-family: 'Roboto Mono', monospace; 
    background: var(--bg); 
    color: var(--text); 
}

/* 4. Apply Public Sans to Headers, Buttons, and UI Elements */
.brand, .pnl-value, .kill-btn, .modal__title, .dlg-title, h2, .card__label, .nav__link { 
    font-family: 'Public Sans', sans-serif; 
}