/* =============================================
   Ledge subdomain re-skin — navy + indigo + DM Sans.
   Loaded after style.css on /ledge pages. Overrides are scoped
   to the page by virtue of only being linked from ledge HTML.
   Source palette: FinanceApp/src/lib/theme.ts (the actual app).
   ============================================= */

:root {
  --bg:            #0A0D1C;
  --surface:       #0F1428;
  --surface-2:     #141929;
  --border:        rgba(255, 255, 255, 0.10);
  --border-hover:  rgba(255, 255, 255, 0.18);
  --accent:        #5050E5;        /* indigo */
  --accent-dim:    rgba(80, 80, 229, 0.16);
  --accent-border: rgba(80, 80, 229, 0.32);
  --text:          #FFFFFF;
  --text-2:        rgba(255, 255, 255, 0.72);
  --text-3:        rgba(255, 255, 255, 0.50);
  --font:          'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:     'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Nav bg: was rgba(10,10,10,.85). Tint to navy. */
.nav {
  background: rgba(10, 13, 28, 0.85);
}

/* Primary button: lime hover and dark text were tied to lime accent.
   Indigo wants white text and a brightened indigo on hover. */
.btn-primary { color: #FFFFFF; }
.btn-primary:hover { background: #6464ED; }

.skip-link { color: #FFFFFF; }

/* Link underlines (about-text and detail-prose) used a lime tint.
   Re-tint to indigo at the same translucency. */
.about-text a,
.detail-prose a {
  border-bottom-color: rgba(80, 80, 229, 0.42);
}
.about-text a:hover,
.detail-prose a:hover {
  border-bottom-color: var(--accent);
}

/* Status badge: indigo dim background + indigo border. Single-color
   treatment, no gold dot. */
.status-badge {
  background: var(--accent-dim);
  border-color: var(--accent-border);
  color: var(--text-2);
}
.status-badge .dot { background: var(--accent); }

/* Feature cards: navy surface, indigo border on hover. */
.feature-card {
  background: var(--surface);
  border-color: var(--border);
}
.feature-card:hover {
  border-color: rgba(80, 80, 229, 0.45);
  background: var(--surface-2);
}
.feature-card-title { color: var(--text); }

/* Tags in the tech row: monospace, subtle indigo on hover. */
.tag {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  background: var(--surface);
}
.tag:hover {
  border-color: var(--accent-border);
  color: var(--text);
}

/* Screen captions: mono for the data-feel, but bump size + opacity
   so 11px mono with low contrast doesn't strand readers. */
.shot-caption {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  color: var(--text-2);
}

.footer a:hover { color: var(--accent); }

/* Detail h2: original style.css leaves width unbounded so headlines
   stretch to container width. With long sentence-style h2s on this
   page, that creates a visible asymmetry against the 640px-wide
   prose below. Cap to match prose. */
.detail-h2 {
  max-width: 640px;
}