/**
 * 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;
  /* Right-hand slide-over panels (source-in-context, "Why these NTBs?", memo
     config). These MUST sit above the sticky top nav (z 50) — at z-40 the nav
     painted over the panel and its scrim, so the panel appeared to open behind
     the chrome. Tooltips (70) still win, which is correct. */
  --z-slideover: 55;
  --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);
}

/* ═══════════════════════════════════════════════════════════════
   4. PE SEMANTIC LAYER  (Interaction System §A.1 — the public API)
   ═══════════════════════════════════════════════════════════════
   Folded in from the former _design-tokens.css so there is ONE token file
   (Interaction System I-1 / Elevation E1). The raw ramps in §1 above are the
   PRIMITIVES (internal); the Equity applied tokens (--bg-*, --text-*, --border-*)
   are TRANSITION ALIASES kept until Equity migrates. This block is the semantic
   public API every PE surface references: --ink/paper/rule (structure),
   --lens (the ONE accent), --flag (the ONLY warm register), plus type/space/
   radius/elevation/motion. No PE surface references a primitive directly
   (CI-gated). Values are byte-identical to the retired _design-tokens.css.
   ─────────────────────────────────────────────────────────────── */

:root {
  /* ── Structural (the document) ──────────────────────────────────────── */
  --ink-900: #0f1829;   /* primary text, headings (editorial contrast)      */
  --ink-700: #1a2744;   /* brand navy; section headers, primary surfaces    */
  --ink-500: #3d4a63;   /* secondary text                                   */
  --ink-300: #586173;   /* tertiary text, captions, metadata (AA on raised) */
  --ink-100: #aab2c0;   /* disabled, placeholder                            */
  --paper: #ffffff;          /* primary background                          */
  --paper-raised: #f7f9fb;   /* raised surfaces, table headers, panels      */
  --paper-sunken: #eef2f6;   /* sunken wells, code blocks, skeletons        */
  --rule: #dde3ea;           /* hairline rules and borders (the divider)    */
  --rule-strong: #c3ccd6;    /* emphasized dividers                         */

  /* ── Intelligence (system thinking — teal/lens family) ──────────────── */
  --lens-700: #0a5e56;  /* darker teal — AA-safe text on lens-100/tint fills */
  --lens-600: #0b7c72;  /* primary interactive, links, active states        */
  --lens-500: #0d9488;  /* brand teal; default interactive                  */
  --lens-400: #14b8a6;  /* hover states, citation highlight box             */
  --lens-100: #d6f0ec;  /* teal-tinted backgrounds (SOSL, selected rows)    */
  --lens-tint: #f0faf8; /* faintest teal wash (conditioning preamble bg)    */

  /* ── Attention (the only warm register — reserved for what matters) ──── */
  --flag-700: #9a3412;  /* severe contradiction text, kill-criteria breach  */
  --flag-500: #ea580c;  /* contradiction marker, threshold-approach warning */
  --flag-300: #fb923c;  /* soft warning, watch-list                         */
  --flag-100: #fff0e6;  /* contradiction panel bg, flagged-row tint, flash  */

  /* ── Confidence & provenance (muted; NOT a traffic-light system) ─────── */
  --verified: #0b7c72;  /* deterministic/verified — uses lens; "system sure"*/
  --evidenced: #3d4a63; /* high-evidence extraction — slate; calm, no alarm */
  --review: #b45309;    /* review-recommended — muted amber; "look here"    */

  /* ── Typography (PE) ────────────────────────────────────────────────── */
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-sans-pe: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono-pe: 'IBM Plex Mono', 'SF Mono', 'JetBrains Mono', Consolas, monospace;

  --text-display: 2.027rem;  --lh-display: 1.2;   /* page titles (serif 600)*/
  --text-h1: 1.602rem;       --lh-h1: 1.25;       /* major headers (serif)  */
  --text-h2: 1.266rem;       --lh-h2: 1.3;        /* subsection (serif 600) */
  --text-h3: 1.125rem;       --lh-h3: 1.4;        /* minor headers (Inter)  */
  --text-body-pe: 1rem;      --lh-body: 1.6;      /* body (Inter 400)       */
  --text-sm-pe: 0.889rem;    --lh-sm: 1.5;        /* secondary, metadata    */
  --text-xs-pe: 0.79rem;     --lh-xs: 1.4;        /* captions, badges, chips*/
  --text-data: 1rem;         --lh-data: 1.4;      /* financial figures mono */
  --text-data-sm: 0.889rem;                       /* table figures (mono)   */

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ── Spacing, radius, elevation (PE — named for intent) ─────────────── */
  --space-hair: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-base: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  --radius-pe-sm: 4px;   /* chips, badges, small controls                   */
  --radius-pe-md: 6px;   /* buttons, inputs, cards                          */
  --radius-pe-lg: 8px;   /* panels, modals                                  */
  --radius-pe-none: 0;   /* tables and document surfaces (editorial)        */

  --elev-0: none;
  --elev-1: 0 1px 2px rgba(15, 24, 41, 0.04), 0 1px 1px rgba(15, 24, 41, 0.06);
  --elev-2: 0 4px 12px rgba(15, 24, 41, 0.08);
  --elev-3: 0 12px 32px rgba(15, 24, 41, 0.12);

  /* ── Motion (PE) ────────────────────────────────────────────────────── */
  --motion-fast: 120ms;   /* state changes, hovers                          */
  --motion-base: 200ms;   /* panels, expanders, fades                       */
  --motion-slow: 320ms;   /* source panel slide, deliberate reveals         */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* entrances                 */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* transitions               */
  --skeleton-shimmer: 1500ms; /* slow, low-contrast, calm                   */

  /* ── Provenance gesture (the signature element) ─────────────────────── */
  --source-panel-width: 480px;   /* slides from right edge                  */
  --source-scrim: rgba(15, 24, 41, 0.18); /* preserves working-surface context */

  /* ── Semantic aliases (so surfaces read intent, not raw token) ───────── */
  --attention-bg: var(--flag-100);
  --attention-border: var(--flag-500);
  --attention-text: var(--flag-700);
  --attention-marker: var(--flag-500);
  --intelligence-bg: var(--lens-tint);
  --intelligence-accent: var(--lens-600);
  --selected-row: var(--lens-tint);
  --flagged-row: var(--flag-100);
  --citation-highlight: var(--lens-400);
}

/* PE semantic layer — DARK MODE (invert structural; keep lens & flag matched) */
[data-theme="dark"],
.dark {
  --ink-900: #f4f7fb;
  --ink-700: #d4dce8;
  --ink-500: #9aa6bd;
  --ink-300: #828ea4;
  --ink-100: #4a576e;
  --paper: #0c1420;
  --paper-raised: #131d2e;
  --paper-sunken: #0a111b;
  --rule: #22304a;
  --rule-strong: #33425e;

  --lens-700: #99f6e4;
  --lens-600: #2dd4bf;
  --lens-500: #14b8a6;
  --lens-400: #5eead4;
  --lens-100: #123c39;
  --lens-tint: #0e2a28;

  --flag-700: #fdba74;
  --flag-500: #fb7c43;
  --flag-300: #c2683a;
  --flag-100: #2a1810;

  --verified: #2dd4bf;
  --evidenced: #9aa6bd;
  --review: #fbbf60;

  --source-scrim: rgba(0, 0, 0, 0.42);
}