/*
 * DESIGN TOKENS - Wealth Portal 2
 * ================================
 * Single source of truth for all visual styles.
 * DO NOT override these in component styles.
 * Change here = changes everywhere.
 *
 * Last updated: 2024-12-11
 */

:root {
    /* ========================================
       COLORS - Brand
       ======================================== */
    --color-primary: #1e3a5f;           /* Prussian blue - brand color */
    --color-primary-hover: #2c5282;     /* Lighter for hover states */
    --color-primary-light: #e6eef5;     /* Very light for backgrounds */

    /* ========================================
       COLORS - UI
       ======================================== */
    --color-background: #f3f4f6;        /* Page background - neutral grey, no blue tint */
    --color-surface: #ffffff;           /* Cards, panels - white to pop against background */
    --color-surface-hover: #f8fafc;     /* Hover state for rows */
    --color-border: #e2e8f0;            /* Default borders */
    --color-border-light: #e9eef4;      /* Subtle dividers - adjusted for new background */

    /* ========================================
       COLORS - Text
       ======================================== */
    --color-text: #1e293b;              /* Primary text */
    --color-text-secondary: #64748b;    /* Muted/meta text */
    --color-text-tertiary: #94a3b8;     /* Very muted */
    --color-text-inverse: #ffffff;      /* Text on dark backgrounds */

    /* ========================================
       COLORS - Status
       ======================================== */
    --color-info: #3b82f6;              /* Blue - info states */
    --color-info-light: #eff6ff;        /* Blue background */
    --color-info-text: #1d4ed8;         /* Blue text */

    --color-success: #22c55e;           /* Green - success states */
    --color-success-light: #dcfce7;     /* Green background */
    --color-success-text: #16a34a;      /* Green text */

    --color-warning: #f59e0b;           /* Orange - warnings */
    --color-warning-light: #fef3c7;     /* Orange background */
    --color-warning-text: #d97706;      /* Orange text */

    --color-error: #ef4444;             /* Red - errors */
    --color-error-light: #fee2e2;       /* Red background */
    --color-error-text: #dc2626;        /* Red text */

    --color-unread: #3b82f6;            /* Blue - unread indicator */
    --color-flagged: #f59e0b;           /* Orange - flagged/bookmarked */

    /* ========================================
       COLORS - Channels
       ======================================== */
    --color-channel-secure: #059669;    /* Green - secure message */
    --color-channel-whatsapp: #25d366;  /* WhatsApp green */
    --color-channel-sms: #3b82f6;       /* Blue - SMS */
    --color-channel-email: #f59e0b;     /* Amber - email */

    /* ========================================
       TYPOGRAPHY
       ======================================== */
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Font sizes - 14px base for data-dense UI */
    --font-size-xs: 11px;               /* Tiny labels */
    --font-size-sm: 12px;               /* Small/meta text */
    --font-size-base: 14px;             /* Body text - DEFAULT */
    --font-size-md: 15px;               /* Slightly larger body */
    --font-size-lg: 16px;               /* Emphasis */
    --font-size-xl: 18px;               /* Section headings */
    --font-size-2xl: 24px;              /* Page headings */
    --font-size-3xl: 30px;              /* Large headings */

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Line heights */
    --line-height-tight: 1.25;          /* Headings */
    --line-height-normal: 1.5;          /* Body text */
    --line-height-relaxed: 1.625;       /* Long-form content */

    /* ========================================
       SPACING - 4px base grid
       ======================================== */
    --space-0: 0;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ========================================
       BORDER RADIUS
       ======================================== */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;              /* Pills, avatars */

    /* ========================================
       SHADOWS
       ======================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* ========================================
       LAYOUT - Shell dimensions
       ======================================== */
    --nav-width: 240px;
    --topbar-height: 64px;
    --ai-panel-width: 380px;
    --content-padding: 24px;

    /* ========================================
       TRANSITIONS
       ======================================== */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.15s ease;
    --transition-slow: 0.3s ease;

    /* ========================================
       Z-INDEX Scale
       ======================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 300;
    --z-modal: 400;
    --z-toast: 500;
}

/*
 * DARK THEME (if ever needed)
 * Uncomment and adjust for dark mode support
 */
/*
[data-theme="dark"] {
    --color-background: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-border: #334155;
}
*/