/* ============================================
   MSFG Dashboard - CSS Variables
   Brand colors, theme tokens, and design system
   ============================================ */

:root {
    /* ========================================
       BRAND COLORS
    ======================================== */
    --green-bright: #8cc63e;
    --green-medium: #6a9b48;
    --green-forest: #4b7b4d;
    --green-dark: #2f5e4c;
    --green-teal: #104547;
    --gray-dark: #404041;
    --white: #ffffff;
    
    /* ========================================
       LIGHT THEME (Default)
    ======================================== */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #e8ecf1;
    --text-primary: #1a1a2e;
    --text-secondary: #4a4a68;
    --text-muted: #8888a4;
    --border-color: #e0e4ea;
    --bg-hover: #edf0f5;

    /* Accent aliases */
    --red: var(--status-danger);

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.12);
    --shadow-xl: 0 12px 48px rgba(0,0,0,0.15);
    
    /* ========================================
       GRADIENTS
    ======================================== */
    --gradient-brand: linear-gradient(135deg, var(--green-bright) 0%, var(--green-forest) 50%, var(--green-teal) 100%);
    --gradient-header: linear-gradient(90deg, #0c2e30 0%, var(--green-teal) 30%, var(--green-dark) 65%, #1a3a2a 100%);
    
    /* ========================================
       STATUS COLORS
    ======================================== */
    --status-success: #22c55e;
    --status-warning: #f59e0b;
    --status-danger: #ef4444;
    --status-info: #3b82f6;
    
    /* ========================================
       TRANSITIONS
    ======================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    
    /* ========================================
       SPACING
    ======================================== */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    
    /* ========================================
       TYPOGRAPHY SCALE
    ======================================== */
    --font-2xs: 0.65rem;   /* 10.4px — badges, micro-labels */
    --font-xs:  0.75rem;   /* 12px   — meta, timestamps, tag labels */
    --font-sm:  0.85rem;   /* 13.6px — body small, table cells, buttons */
    --font-md:  0.9rem;    /* 14.4px — body default, form inputs */
    --font-base: 0.95rem;  /* 15.2px — card titles, slightly emphasized text */
    --font-lg:  1.1rem;    /* 17.6px — section titles */
    --font-xl:  1.25rem;   /* 20px   — modal headers */
    --font-2xl: 1.5rem;    /* 24px   — page titles */
    --font-3xl: 1.75rem;   /* 28px   — hero values, investor names */
    --font-4xl: 2rem;      /* 32px   — h1 */

    /* ========================================
       BORDER RADIUS
    ======================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* ========================================
       EXTENDED PALETTE (semantic aliases)
    ======================================== */
    /* Pace / performance indicator colors */
    --color-pace-ahead: #4ade80;
    --color-pace-on-track: #22d3ee;
    --color-pace-behind: #fbbf24;

    /* Chart / data visualization */
    --color-chart-blue: #3b82f6;
    --color-chart-purple: #a855f7;
    --color-chart-cyan: #22d3ee;
    --color-chart-orange: #f97316;
    --color-chart-teal: #0891b2;

    /* Dark panel backgrounds (briefing ribbon) */
    --bg-panel-dark: #0a1628;
    --bg-panel-dark-mid: #0f2436;
    --bg-panel-dark-light: #122a3a;
    --bg-panel-select: #1a2a3a;

    /* Focus ring */
    --focus-ring-color: rgba(140, 198, 62, 0.4);
    --focus-ring: 0 0 0 3px var(--focus-ring-color);
}

/* ========================================
   DARK THEME
======================================== */
[data-theme="dark"] {
    --bg-primary: #0f1419;
    --bg-secondary: #1a2332;
    --bg-tertiary: #243044;
    --text-primary: #e8eaed;
    --text-secondary: #b8bcc4;
    --text-muted: #9ca3af;
    --border-color: #2d3a4d;
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.2);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.4);
    --shadow-xl: 0 12px 48px rgba(0,0,0,0.5);
    --bg-hover: #1e2d40;
    --red: var(--status-danger);
    --focus-ring-color: rgba(140, 198, 62, 0.5);
}