/**
 * FundLens.ai Design System
 * Version: 1.0.0
 * 
 * Professional PE/financial services platform design system
 * Brand DNA: Deep navy sophistication, clean typography, wave pattern motif
 * 
 * Table of Contents:
 * 1. Design Tokens
 *    - Colors
 *    - Typography
 *    - Spacing
 *    - Border Radius
 *    - Shadows
 *    - Transitions
 *    - Z-Index
 * 2. Base Styles
 * 3. Dark Mode
 */

/* ═══════════════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────
     BRAND COLORS - Core FundLens Identity
     ───────────────────────────────────────────────────────────── */
  
  /* Primary Navy Palette */
  --color-navy-950: #050B12;
  --color-navy-900: #0B1829;
  --color-navy-800: #132337;
  --color-navy-700: #1A3A5C;
  --color-navy-600: #1E5A7A;
  --color-navy-500: #2D4A6B;
  
  /* Teal/Blue Accent Palette */
  --color-teal-600: #1B4D6E;
  --color-teal-500: #1E5A7A;
  --color-teal-400: #3A7CA5;
  --color-teal-300: #5B9DC4;
  --color-teal-200: #A3CEEB;
  --color-teal-100: #D6EAF5;
  --color-teal-50: #EBF5FA;
  
  /* ─────────────────────────────────────────────────────────────
     SEMANTIC COLORS
     ───────────────────────────────────────────────────────────── */
  
  /* Success (Green) */
  --color-success-600: #059669;
  --color-success-500: #10B981;
  --color-success-100: #D1FAE5;
  --color-success-50: #ECFDF5;
  
  /* Warning (Amber) */
  --color-warning-600: #D97706;
  --color-warning-500: #F59E0B;
  --color-warning-100: #FEF3C7;
  --color-warning-50: #FFFBEB;
  
  /* Error (Red) */
  --color-error-600: #DC2626;
  --color-error-500: #EF4444;
  --color-error-100: #FEE2E2;
  --color-error-50: #FEF2F2;
  
  /* Info (Blue) */
  --color-info-600: #2563EB;
  --color-info-500: #3B82F6;
  --color-info-100: #DBEAFE;
  --color-info-50: #EFF6FF;
  
  /* ─────────────────────────────────────────────────────────────
     NEUTRAL COLORS
     ───────────────────────────────────────────────────────────── */
  
  --color-white: #FFFFFF;
  --color-gray-50: #F8FAFC;
  --color-gray-100: #F1F5F9;
  --color-gray-200: #E2E8F0;
  --color-gray-300: #CBD5E1;
  --color-gray-400: #94A3B8;
  --color-gray-500: #64748B;
  --color-gray-600: #475569;
  --color-gray-700: #334155;
  --color-gray-800: #1E293B;
  --color-gray-900: #0F172A;
  
  /* ─────────────────────────────────────────────────────────────
     APPLIED COLOR TOKENS (Light Mode)
     ───────────────────────────────────────────────────────────── */
  
  /* Backgrounds */
  --bg-primary: var(--color-white);
  --bg-secondary: var(--color-gray-50);
  --bg-tertiary: var(--color-gray-100);
  --bg-inverse: var(--color-navy-900);
  --bg-accent: var(--color-teal-50);
  --bg-hover: var(--color-gray-100);
  --bg-active: var(--color-teal-100);
  
  /* Text */
  --text-primary: var(--color-navy-900);
  --text-secondary: var(--color-gray-600);
  --text-tertiary: var(--color-gray-400);
  --text-inverse: var(--color-white);
  --text-accent: var(--color-teal-500);
  --text-link: var(--color-teal-600);
  --text-link-hover: var(--color-navy-700);
  
  /* Borders */
  --border-subtle: var(--color-gray-200);
  --border-default: var(--color-gray-300);
  --border-strong: var(--color-gray-400);
  --border-focus: var(--color-teal-500);
  --border-accent: var(--color-teal-400);
  
  /* ─────────────────────────────────────────────────────────────
     GRADIENTS
     ───────────────────────────────────────────────────────────── */
  
  --gradient-hero: linear-gradient(135deg, 
    var(--color-navy-900) 0%, 
    var(--color-navy-700) 50%, 
    var(--color-teal-500) 100%
  );
  
  --gradient-subtle: linear-gradient(180deg, 
    var(--color-gray-50) 0%, 
    var(--color-white) 100%
  );
  
  --gradient-card-hover: linear-gradient(135deg, 
    rgba(30, 90, 122, 0.05) 0%, 
    rgba(11, 24, 41, 0.02) 100%
  );
  
  --gradient-button: linear-gradient(135deg, 
    var(--color-navy-900) 0%, 
    var(--color-navy-700) 100%
  );
  
  /* ─────────────────────────────────────────────────────────────
     TYPOGRAPHY
     ───────────────────────────────────────────────────────────── */
  
  /* Font Families */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;
  
  /* Font Sizes */
  --text-xs: 0.6875rem;    /* 11px (was 12px) */
  --text-sm: 0.8125rem;    /* 13px (was 14px) */
  --text-base: 0.875rem;   /* 14px (was 16px) */
  --text-lg: 1rem;         /* 16px (was 18px) */
  --text-xl: 1.125rem;     /* 18px (was 20px) */
  --text-2xl: 1.25rem;     /* 20px (was 24px) */
  --text-3xl: 1.5rem;      /* 24px (was 30px) */
  --text-4xl: 1.875rem;    /* 30px (was 36px) */
  --text-5xl: 2.25rem;     /* 36px (was 48px) */
  
  /* Font Weights */
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  
  /* Line Heights */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  
  /* Letter Spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.025em;
  --tracking-wider: 0.05em;
  
  /* ─────────────────────────────────────────────────────────────
     SPACING
     ───────────────────────────────────────────────────────────── */
  
  --spacing-0: 0;
  --spacing-px: 1px;
  --spacing-0-5: 0.125rem;  /* 2px */
  --spacing-1: 0.25rem;     /* 4px */
  --spacing-1-5: 0.375rem;  /* 6px */
  --spacing-2: 0.5rem;      /* 8px */
  --spacing-2-5: 0.625rem;  /* 10px */
  --spacing-3: 0.75rem;     /* 12px */
  --spacing-3-5: 0.875rem;  /* 14px */
  --spacing-4: 1rem;        /* 16px */
  --spacing-5: 1.25rem;     /* 20px */
  --spacing-6: 1.5rem;      /* 24px */
  --spacing-7: 1.75rem;     /* 28px */
  --spacing-8: 2rem;        /* 32px */
  --spacing-9: 2.25rem;     /* 36px */
  --spacing-10: 2.5rem;     /* 40px */
  --spacing-12: 3rem;       /* 48px */
  --spacing-14: 3.5rem;     /* 56px */
  --spacing-16: 4rem;       /* 64px */
  --spacing-20: 5rem;       /* 80px */
  --spacing-24: 6rem;       /* 96px */
  
  /* ─────────────────────────────────────────────────────────────
     BORDER RADIUS
     ───────────────────────────────────────────────────────────── */
  
  --radius-none: 0;
  --radius-sm: 0.25rem;     /* 4px */
  --radius-md: 0.375rem;    /* 6px */
  --radius-lg: 0.5rem;      /* 8px */
  --radius-xl: 0.75rem;     /* 12px */
  --radius-2xl: 1rem;       /* 16px */
  --radius-3xl: 1.5rem;     /* 24px */
  --radius-full: 9999px;    /* Pill shape */
  
  /* ─────────────────────────────────────────────────────────────
     SHADOWS
     ───────────────────────────────────────────────────────────── */
  
  --shadow-xs: 0 1px 2px 0 rgba(11, 24, 41, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(11, 24, 41, 0.1), 0 1px 2px -1px rgba(11, 24, 41, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(11, 24, 41, 0.1), 0 2px 4px -2px rgba(11, 24, 41, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(11, 24, 41, 0.1), 0 4px 6px -4px rgba(11, 24, 41, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(11, 24, 41, 0.1), 0 8px 10px -6px rgba(11, 24, 41, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(11, 24, 41, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(11, 24, 41, 0.05);
  
  /* Focus shadows */
  --shadow-focus: 0 0 0 3px rgba(30, 90, 122, 0.3);
  --shadow-focus-error: 0 0 0 3px rgba(239, 68, 68, 0.3);
  
  /* ─────────────────────────────────────────────────────────────
     TRANSITIONS
     ───────────────────────────────────────────────────────────── */
  
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slower: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  
  /* ─────────────────────────────────────────────────────────────
     Z-INDEX SCALE
     ───────────────────────────────────────────────────────────── */
  
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
}

/* ═══════════════════════════════════════════════════════════════
   2. BASE STYLES
   ═══════════════════════════════════════════════════════════════ */

* {
  box-sizing: border-box;
}

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background-color: var(--bg-primary);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--font-semibold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  margin: 0 0 var(--spacing-4) 0;
  line-height: var(--leading-relaxed);
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--text-link-hover);
}

a:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

code, pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

code {
  padding: var(--spacing-0-5) var(--spacing-1);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}

pre {
  padding: var(--spacing-4);
  background-color: var(--bg-tertiary);
  border-radius: var(--radius-lg);
  overflow-x: auto;
}

pre code {
  padding: 0;
  background-color: transparent;
}

/* Lists */
ul, ol {
  margin: 0 0 var(--spacing-4) 0;
  padding-left: var(--spacing-6);
}

li {
  margin-bottom: var(--spacing-2);
}

/* Images */
img {
  max-width: 100%;
  height: auto;
}

/* Logo sizing — prevent design-system reset from overriding explicit height */
img[alt="FundLens"] {
  max-height: 32px !important;
  width: auto !important;
  height: 32px !important;
  display: block;
  object-fit: contain;
}

/* Tables */
table {
  width: 100%;
  border-collapse: collapse;
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   TOP NAVIGATION — Consistent dark navy nav across all pages
   ═══════════════════════════════════════════════════════════════ */
nav.bg-white.sticky {
  background: var(--color-navy-900) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

nav.bg-white.sticky,
nav.bg-white.sticky * {
  color: var(--text-inverse) !important;
}

/* Dropdown menus inside nav should stay light with dark text */
nav.bg-white.sticky .absolute,
nav.bg-white.sticky .filing-notif-dropdown {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
}

nav.bg-white.sticky .absolute,
nav.bg-white.sticky .absolute *,
nav.bg-white.sticky .filing-notif-dropdown,
nav.bg-white.sticky .filing-notif-dropdown * {
  color: #334155 !important;
}

/* Notification dropdown — explicit color overrides */
nav.bg-white.sticky .filing-notif-header h3 {
  color: #0f172a !important;
}

nav.bg-white.sticky .filing-notif-ticker {
  color: #0f172a !important;
  font-weight: 600 !important;
}

nav.bg-white.sticky .filing-notif-date {
  color: #64748b !important;
}

nav.bg-white.sticky .filing-notif-dismiss-all {
  color: #2563eb !important;
}

nav.bg-white.sticky .filing-notif-empty i {
  color: #cbd5e1 !important;
}

nav.bg-white.sticky .filing-notif-empty p {
  color: #94a3b8 !important;
}

nav.bg-white.sticky .filing-notif-dismiss {
  color: #94a3b8 !important;
  opacity: 0.8 !important;
}

nav.bg-white.sticky .filing-notif-card:hover .filing-notif-dismiss {
  opacity: 1 !important;
}

nav.bg-white.sticky .filing-notif-dismiss:hover {
  color: #dc2626 !important;
  background: #fee2e2 !important;
}

nav.bg-white.sticky .filing-notif-footer a {
  color: #2563eb !important;
}

nav.bg-white.sticky .filing-notif-footer a:hover {
  color: #1d4ed8 !important;
}

/* Preserve filing type badge colors in nav dropdown */
nav.bg-white.sticky .filing-type-10k {
  color: #1e40af !important;
  background: #dbeafe !important;
}

nav.bg-white.sticky .filing-type-10q {
  color: #166534 !important;
  background: #dcfce7 !important;
}

nav.bg-white.sticky .filing-type-8k {
  color: #92400e !important;
  background: #fef3c7 !important;
}

nav.bg-white.sticky .filing-type-default {
  color: #475569 !important;
  background: #f1f5f9 !important;
}

/* User menu dropdown text colors */
nav.bg-white.sticky .absolute .text-gray-700,
nav.bg-white.sticky .absolute .text-gray-900 {
  color: #374151 !important;
}

nav.bg-white.sticky .absolute .text-gray-500,
nav.bg-white.sticky .absolute .text-gray-600 {
  color: #6b7280 !important;
}

/* Profile button in dark nav — ensure white text and proper hover */
nav.bg-white.sticky > div button.flex,
nav.bg-white.sticky .relative > button.flex {
  color: #FFFFFF !important;
}

nav.bg-white.sticky .relative > button.flex:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

nav.bg-white.sticky .relative > button.flex .bg-indigo-100 {
  background: rgba(255, 255, 255, 0.2) !important;
}

nav.bg-white.sticky .relative > button.flex .text-indigo-600 {
  color: #FFFFFF !important;
}

nav.bg-white.sticky .absolute .text-red-600 {
  color: #dc2626 !important;
}

nav.bg-white.sticky .absolute * {
  color: #0F172A !important;
}

nav.bg-white.sticky .absolute .text-xs {
  color: #475569 !important;
}

nav.bg-white.sticky .absolute .text-red-600,
nav.bg-white.sticky .absolute button.text-red-600 {
  color: #DC2626 !important;
}

nav.bg-white.sticky .absolute a:hover {
  color: #1a56db !important;
}

/* Tenant badge should keep its green background */
nav.bg-white.sticky .tenant-badge {
  background: linear-gradient(135deg, var(--color-success-500) 0%, var(--color-success-600) 100%) !important;
}

/* Logo container on dark nav — keep white bg for logo visibility */
nav.bg-white.sticky img[alt="FundLens"] {
  background: transparent;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
   3. DARK MODE
   ═══════════════════════════════════════════════════════════════ */

[data-theme="dark"],
.dark {
  /* Backgrounds */
  --bg-primary: var(--color-navy-900);
  --bg-secondary: var(--color-navy-800);
  --bg-tertiary: var(--color-navy-700);
  --bg-inverse: var(--color-white);
  --bg-accent: rgba(30, 90, 122, 0.2);
  --bg-hover: var(--color-navy-700);
  --bg-active: rgba(30, 90, 122, 0.3);
  
  /* Text */
  --text-primary: var(--color-gray-50);
  --text-secondary: var(--color-gray-400);
  --text-tertiary: var(--color-gray-500);
  --text-inverse: var(--color-navy-900);
  --text-accent: var(--color-teal-300);
  --text-link: var(--color-teal-400);
  --text-link-hover: var(--color-teal-300);
  
  /* Borders */
  --border-subtle: var(--color-navy-700);
  --border-default: var(--color-navy-600);
  --border-strong: var(--color-navy-500);
}