core/styles.py

"""CSS Styles for Streamlit Dashboard.

Uses ChainShift Brand Colors (2026 Design System).
Primary: Electric Indigo (#5041FF)
Accent: Neo Aqua (#00D5B5)
"""

# ============================================================================
# Brand Colors (synced with app/core/brand.py)
# ============================================================================
INDIGO_700 = "#5041FF"  # Primary
INDIGO_800 = "#3E32CC"  # Primary Dark
INDIGO_100 = "#E5E2FF"  # Primary Light BG
AQUA_600 = "#00D5B5"    # Accent
AQUA_100 = "#B8FFF6"    # Accent Light BG
POSITIVE = "#10B981"    # Green
NEGATIVE = "#EF4444"    # Red
NEUTRAL = "#6B7280"     # Gray
WARNING = "#F59E0B"     # Amber

DASHBOARD_CSS = f"""
<style>
    .insight-card {{
        background: linear-gradient(135deg, {INDIGO_800} 0%, {INDIGO_700} 100%);
        padding: 20px;
        border-radius: 12px;
        color: white;
        margin-bottom: 20px;
    }}
    .metric-positive {{ color: {POSITIVE}; font-weight: bold; }}
    .metric-negative {{ color: {NEGATIVE}; font-weight: bold; }}
    .metric-neutral {{ color: {NEUTRAL}; }}
    .highlight-box {{
        background: {AQUA_100};
        border-left: 4px solid {AQUA_600};
        padding: 15px;
        margin: 10px 0;
        border-radius: 0 8px 8px 0;
    }}
    .warning-box {{
        background: #FEF2F2;
        border-left: 4px solid {NEGATIVE};
        padding: 15px;
        margin: 10px 0;
        border-radius: 0 8px 8px 0;
    }}
    .info-box {{
        background: {INDIGO_100};
        border-left: 4px solid {INDIGO_700};
        padding: 15px;
        margin: 10px 0;
        border-radius: 0 8px 8px 0;
    }}
    .big-number {{
        font-size: 48px;
        font-weight: bold;
        line-height: 1;
        color: {INDIGO_700};
    }}
    .filter-section {{
        background: #F8FAFC;
        padding: 15px;
        border-radius: 8px;
        margin-bottom: 15px;
    }}
    /* Primary button style */
    .stButton > button {{
        background-color: {INDIGO_700};
        color: white;
        border: none;
    }}
    .stButton > button:hover {{
        background-color: {INDIGO_800};
    }}
</style>
"""

# Tier color mapping for nudge candidates
TIER_BORDER_COLORS = {
    "HIGH": NEGATIVE,
    "MEDIUM": WARNING,
    "LOW": POSITIVE,
}

# Chart colors for Streamlit charts (plotly, altair)
CHART_COLORS = [
    INDIGO_700,   # Primary
    AQUA_600,     # Accent
    "#9585FF",    # Indigo 500
    "#3DF1E7",    # Aqua 400
    "#3E32CC",    # Indigo 800
    "#06A68D",    # Aqua 700
]