/** * Financial Analytics Platform - Main Application Styles * Dark theme with blue/purple accent colors */ /* ============================================================================ CSS Variables - Design Tokens ============================================================================ */ :root { /* Colors - Base */ --color-bg-primary: #0f172a; --color-bg-secondary: rgba(15, 23, 42, 0.6); --color-bg-tertiary: rgba(30, 41, 59, 0.8); --color-bg-dark: #020617; --color-border: #1f2937; --color-border-light: rgba(31, 41, 55, 0.5); --color-border-dark: #111827; --color-border-medium: #374151; /* Colors - Text */ --color-text-primary: #e5e7eb; --color-text-secondary: #9ca3af; --color-text-muted: #6b7280; --color-text-placeholder: #4b5563; --color-text-accent: #a5b4fc; /* Colors - Accent */ --color-primary: #4f46e5; --color-primary-light: #60a5fa; --color-primary-lighter: #93c5fd; --color-primary-bg: rgba(79, 70, 229, 0.1); --color-primary-border: rgba(79, 70, 229, 0.3); --color-secondary: #8b5cf6; --color-secondary-light: #a78bfa; /* Colors - Semantic */ --color-success: #22c55e; --color-success-light: #bbf7d0; --color-success-bg: rgba(34, 197, 94, 0.15); --color-success-border: rgba(34, 197, 94, 0.3); --color-danger: #ef4444; --color-danger-light: #fecaca; --color-danger-bg: rgba(239, 68, 68, 0.15); --color-danger-border: rgba(239, 68, 68, 0.3); --color-warning: #eab308; --color-warning-light: #fde68a; --color-warning-bg: rgba(234, 179, 8, 0.15); --color-warning-border: rgba(234, 179, 8, 0.3); --color-info: #3b82f6; --color-info-light: #bfdbfe; --color-info-bg: rgba(59, 130, 246, 0.1); --color-info-border: rgba(59, 130, 246, 0.3); /* Typography */ --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-size-xs: 11px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-lg: 16px; --font-size-xl: 18px; --font-size-2xl: 24px; --font-size-3xl: 28px; /* Spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 12px; --spacing-lg: 16px; --spacing-xl: 20px; --spacing-2xl: 24px; --spacing-3xl: 32px; /* Border Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4); /* Transitions */ --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* Component Patterns - Cards */ --card-bg: rgba(15, 23, 42, 0.9); --card-border: #1f2937; --card-shadow: none; --card-hover-border: rgba(79, 70, 229, 0.4); --card-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); /* Component Patterns - Inputs */ --input-bg: #020617; --input-border: #1f2937; --input-text: #e5e7eb; --input-placeholder: #4b5563; --input-focus-border: #4f46e5; --input-focus-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1); /* Component Patterns - Tables */ --table-header-bg: #0f172a; --table-header-text: #9ca3af; --table-row-border: #1f2937; --table-row-hover: rgba(79, 70, 229, 0.05); --table-cell-text: #e5e7eb; /* Component Patterns - Sections */ --section-bg: rgba(15, 23, 42, 0.6); --section-border: #1f2937; --section-divider: #1f2937; --heading-color: #e5e7eb; --body-text: #9ca3af; --muted-text: #6b7280; --link-color: #a5b4fc; --link-hover-color: #c7d2fe; } /* ============================================================================ Light Theme - Applied via class on ============================================================================ */ html.theme-light { /* Colors - Base */ --color-bg-primary: #f8fafc; --color-bg-secondary: rgba(241, 245, 249, 0.8); --color-bg-tertiary: rgba(226, 232, 240, 0.6); --color-bg-dark: #f1f5f9; --color-border: #e2e8f0; --color-border-light: rgba(226, 232, 240, 0.5); --color-border-dark: #cbd5e1; --color-border-medium: #94a3b8; /* Colors - Text */ --color-text-primary: #1e293b; --color-text-secondary: #475569; --color-text-muted: #64748b; --color-text-placeholder: #94a3b8; --color-text-accent: #4338ca; /* Colors - Accent */ --color-primary: #4f46e5; --color-primary-light: #4338ca; --color-primary-lighter: #3730a3; --color-primary-bg: rgba(79, 70, 229, 0.08); --color-primary-border: rgba(79, 70, 229, 0.2); --color-secondary: #7c3aed; --color-secondary-light: #6d28d9; /* Colors - Semantic */ --color-success: #16a34a; --color-success-light: #166534; --color-success-bg: rgba(22, 163, 74, 0.1); --color-success-border: rgba(22, 163, 74, 0.25); --color-danger: #dc2626; --color-danger-light: #7f1d1d; --color-danger-bg: rgba(220, 38, 38, 0.08); --color-danger-border: rgba(220, 38, 38, 0.2); --color-warning: #ca8a04; --color-warning-light: #713f12; --color-warning-bg: rgba(202, 138, 4, 0.08); --color-warning-border: rgba(202, 138, 4, 0.2); --color-info: #2563eb; --color-info-light: #1e40af; --color-info-bg: rgba(37, 99, 235, 0.08); --color-info-border: rgba(37, 99, 235, 0.2); /* 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); /* Component Patterns - Cards */ --card-bg: #ffffff; --card-border: #e2e8f0; --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06); --card-hover-border: #c7d2fe; --card-hover-shadow: 0 8px 25px rgba(79, 70, 229, 0.08), 0 4px 6px rgba(0, 0, 0, 0.04); /* Component Patterns - Inputs */ --input-bg: #ffffff; --input-border: #e2e8f0; --input-text: #1e293b; --input-placeholder: #94a3b8; --input-focus-border: #6366f1; --input-focus-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1); /* Component Patterns - Tables */ --table-header-bg: #f8fafc; --table-header-text: #475569; --table-row-border: #f1f5f9; --table-row-hover: #f8fafc; --table-cell-text: #1e293b; /* Component Patterns - Sections */ --section-bg: #ffffff; --section-border: #e2e8f0; --section-divider: #f1f5f9; --heading-color: #1e293b; --body-text: #475569; --muted-text: #64748b; --link-color: #4f46e5; --link-hover-color: #4338ca; } /* ============================================================================ Reset and Base Styles ============================================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-family); font-size: var(--font-size-base); line-height: 1.6; color: var(--color-text-primary); background-color: var(--color-bg-primary); min-height: 100vh; } a { color: var(--color-primary-light); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-lighter); } /* ============================================================================ Layout ============================================================================ */ .container { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-xl); } main { min-height: calc(100vh - 200px); padding: var(--spacing-2xl) 0; } /* ============================================================================ Page Headers ============================================================================ */ .page-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--spacing-2xl); gap: var(--spacing-lg); } .page-header h1 { font-size: var(--font-size-2xl); font-weight: 600; color: var(--color-text-primary); margin: 0 0 var(--spacing-sm) 0; } .page-header-actions { display: flex; gap: var(--spacing-md); flex-shrink: 0; } /* ============================================================================ Breadcrumbs ============================================================================ */ .breadcrumb { display: flex; align-items: center; gap: var(--spacing-sm); font-size: var(--font-size-sm); margin-bottom: var(--spacing-xl); list-style: none; } .breadcrumb-item { display: flex; align-items: center; } .breadcrumb-item + .breadcrumb-item::before { content: "/"; margin-right: var(--spacing-sm); color: var(--color-text-muted); } .breadcrumb-item a { color: var(--color-primary-light); } .breadcrumb-item a:hover { color: var(--color-primary-lighter); } .breadcrumb-item.active { color: var(--color-text-muted); } /* ============================================================================ Meta Information ============================================================================ */ .meta-info { display: flex; gap: var(--spacing-lg); align-items: center; flex-wrap: wrap; } .meta-item { font-size: var(--font-size-sm); color: var(--color-text-secondary); } .meta-item strong { color: var(--color-text-primary); } /* ============================================================================ Typography ============================================================================ */ h1, h2, h3, h4, h5, h6 { color: var(--color-text-primary); font-weight: 600; line-height: 1.3; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); margin-bottom: var(--spacing-xl); } h3 { font-size: var(--font-size-lg); } h4 { font-size: var(--font-size-base); } p { color: var(--color-text-secondary); line-height: 1.6; } .text-success { color: var(--color-success) !important; } .text-danger { color: var(--color-danger) !important; } .text-warning { color: var(--color-warning) !important; } .text-muted { color: var(--color-text-muted) !important; } /* ============================================================================ Grid Layouts ============================================================================ */ .grid { display: grid; gap: var(--spacing-xl); } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } .grid-auto { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } /* ============================================================================ Utility Classes ============================================================================ */ .text-center { text-align: center; } .text-right { text-align: right; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: var(--spacing-sm); } .mt-2 { margin-top: var(--spacing-md); } .mt-3 { margin-top: var(--spacing-lg); } .mt-4 { margin-top: var(--spacing-xl); } .mt-5 { margin-top: var(--spacing-2xl); } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: var(--spacing-sm); } .mb-2 { margin-bottom: var(--spacing-md); } .mb-3 { margin-bottom: var(--spacing-lg); } .mb-4 { margin-bottom: var(--spacing-xl); } .mb-5 { margin-bottom: var(--spacing-2xl); } .p-0 { padding: 0; } .p-1 { padding: var(--spacing-sm); } .p-2 { padding: var(--spacing-md); } .p-3 { padding: var(--spacing-lg); } .p-4 { padding: var(--spacing-xl); } /* ============================================================================ Responsive ============================================================================ */ @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .container { padding: 0 var(--spacing-lg); } .page-header { flex-direction: column; } .page-header-actions { width: 100%; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }