/* ──────────────────────────────────────────────────────────────
   Insightra — design tokens. Full light mode, HELLA red accent.
   Signature: oversized JetBrains Mono figures + mono micro-labels.
   No dark mode, no gradients, no glow. One accent, used for signal.
   ────────────────────────────────────────────────────────────── */
:root {
  --canvas: #FFFFFF;
  --canvas-2: #FAFAF9;
  --surface: #FFFFFF;
  --surface-2: #F6F5F2;
  --surface-3: #EFEDE8;

  --ink: #1B1C1E;
  --ink-2: #494B4F;
  --ink-3: #797B80;
  --ink-faint: #B6B4AE;

  --border: rgba(20, 18, 16, 0.07);
  --border-strong: rgba(20, 18, 16, 0.13);

  /* HELLA brand — navy primary + gold accent */
  --brand: #13235B;
  --brand-2: #0D1840;
  --brand-soft: #E8EBF4;
  --brand-text: #21336E;

  --accent: #FBD400;       /* HELLA gold/yellow */
  --accent-2: #E9C200;
  --accent-soft: #FEF4C2;
  --accent-ink: #1A2540;   /* readable text on gold */

  --slate: #6E7680;   --slate-soft: #EEF0F2;

  --ok-bg: #ECF4ED;   --ok-fg: #2F6A3A;
  --warn-bg: #FBF2D9;  --warn-fg: #8A5B00;
  --info-bg: #E6F1FB;  --info-fg: #1E6699;
  --red-bg: #E8EBF4;   --red-fg: #21336E;

  --r-lg: 14px; --r-md: 10px; --r-sm: 6px; --r-pill: 9999px;

  --font-sans: "Plus Jakarta Sans", "SF Pro Display", "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  --shadow-card: 0 1px 2px rgba(20, 18, 16, 0.04);
  --shadow-pop: 0 12px 40px rgba(20, 18, 16, 0.12);

  --duration: 200ms;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--canvas-2);
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button { font-family: inherit; color: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
a { color: inherit; }

/* Utility ---------------------------------------------------- */
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

/* Status tags — flat, no border ------------------------------ */
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: 11.5px; font-weight: 600; line-height: 1;
  white-space: nowrap;
}
.tag-ok   { background: var(--ok-bg);   color: var(--ok-fg); }
.tag-warn { background: var(--warn-bg); color: var(--warn-fg); }
.tag-info { background: var(--info-bg); color: var(--info-fg); }
.tag-red  { background: var(--red-bg);  color: var(--red-fg); }
.tag-mute { background: var(--surface-3); color: var(--ink-3); }

/* The AI mark — the only place red runs warm + bold ---------- */
.ai-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px 4px 8px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.ai-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

/* Buttons ---------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 38px; padding: 0 16px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600;
  transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-2); }
.btn-ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 12.5px; }

/* Toast ------------------------------------------------------ */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: var(--r-md);
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-pop); z-index: 200;
  opacity: 0; animation: toast-in 220ms var(--ease) forwards;
}
@keyframes toast-in { to { opacity: 1; transform: translateX(-50%) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}