/* Intelligant AI design tokens, from the design system's colors_and_type.css.
   Only the variables the executive dashboard uses are carried over; the rest of
   the app still runs on its own --bg/--card/--text scale and the two are kept
   separate deliberately until the other screens are migrated. */
:root {
  --ig-surface-base: #030712;
  --ig-surface-1: #111827;
  --ig-surface-1-muted: rgba(17, 24, 39, 0.6);
  --ig-surface-2: #1f2937;
  --ig-surface-3: #374151;

  --ig-border-default: #1f2937;
  --ig-border-hover: #374151;

  --ig-text-primary: #ffffff;
  --ig-text-secondary: #d1d5db;
  --ig-text-tertiary: #9ca3af;
  --ig-text-muted: #6b7280;

  --ig-accent: #5eead4;
  --ig-accent-hover: #2dd4bf;
  --ig-accent-ring: #14b8a6;
  --ig-accent-muted-bg: rgba(20, 184, 166, 0.1);
  --ig-accent-muted-bg-2: rgba(20, 184, 166, 0.2);
  --ig-accent-border: rgba(20, 184, 166, 0.3);

  --ig-success: #22c55e;
  --ig-success-text: #86efac;
  --ig-success-bg: rgba(34, 197, 94, 0.1);
  --ig-success-border: rgba(34, 197, 94, 0.3);

  --ig-warning: #f59e0b;
  --ig-warning-text: #fcd34d;
  --ig-warning-bg: rgba(245, 158, 11, 0.2);
  --ig-warning-border: rgba(245, 158, 11, 0.4);

  --ig-danger-text: #f87171;
  --ig-info: #3b82f6;

  --ig-font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ig-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
}

/* The executive dashboard is dark regardless of the app theme: it is a board
   surface, and the design commits to one look. Scoped to the section so the
   light screens beside it are untouched. */
[data-screen="dashboard"].ig-exec {
  font-family: var(--ig-font-sans);
  color: var(--ig-text-secondary);
  padding-top: 12px;
}
[data-screen="dashboard"].ig-exec h1,
[data-screen="dashboard"].ig-exec h3 { font-family: var(--ig-font-mono); }
.ig-exec .ig-card { background: var(--ig-surface-1-muted); border: 1px solid var(--ig-border-default); border-radius: 14px; }
.ig-exec .ig-card:hover { border-color: var(--ig-border-hover); }
.ig-exec button { font-family: var(--ig-font-mono); }
@media (max-width: 1100px) {
  .ig-hero, .ig-impact { grid-template-columns: 1fr !important; }
}