/* ==========================================================================
   CSS Variables & Tokens
   ========================================================================== */
    :root {
    /* Color Palette - Light Theme */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-card: #FFFFFF;
    
    --text-primary: #26053A;
    --text-secondary: #52525B;
    
    /* Accents - Custom Palette */
    --accent-primary: #26053A;
    --accent-vibrant: #FC4D10;
    --accent-purple: #7433FF;
    --accent-purple-glow: rgba(116, 51, 255, 0.15);
    
    --accent-blue: var(--accent-purple); /* Aliasing for existing classes */
    --accent-green: #10B981;
    --accent-red: var(--accent-vibrant);
    --accent-orange: var(--accent-vibrant);

    /* Semantic accent tokens — use these in new code instead of raw hex.
       Phase 7 of the smart-logic overhaul introduced them so pillar
       colours (fitness), account badge colours (dashboard) and rule
       statuses (insights.js) share one palette.

         signal-positive : "doing well" / on-track  (green)
         signal-warning  : "watch this"             (orange)
         signal-critical : "act now"                (red)
         signal-neutral  : no judgement / unknown   (grey)
         signal-accent   : draws attention / brand  (purple)
    */
    --signal-positive: #10B981;
    --signal-warning:  #ff9f0a;
    --signal-critical: #ff6370;
    --signal-neutral:  #E5E7EB;
    --signal-accent:   #7433FF;
    
    /* Typography */
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    
    /* Spacing & Borders */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-full: 9999px;
    
    --border-subtle: 1px solid rgba(0, 0, 0, 0.06);
    
    /* Effects */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: rgba(0, 0, 0, 0.08);
    --glass-blur: blur(20px);
    
    --transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}