/* Krellbot Signal shared design tokens and base components.
   Contract: KRELL-SIGNAL-20261010 (owner-approved Signal + Krell Asset Pack v2).
   Consumed by site/index.html and future docs/secondary-page migrations.
   Palette values are the approved locked vocabulary; see docs/design-system.md. */

@import url("./fonts/fonts.css");

:root {
  /* Approved Signal palette */
  --krell-navy: #0E1C29;
  --krell-surface: #14222E;
  --krell-panel: #18354A;
  --krell-line: #22465D;
  --krell-text: #E9F0F5;
  --krell-muted: #ABC4D8;
  --krell-seafoam: #A8D8D1;
  --krell-sage: #B3DDA8;
  --krell-coral: #CC9689;

  /* Semantic aliases (sage = affirmative action, seafoam = focus/links) */
  --bg: #0E1C29;
  --surface: #14222E;
  --lift: #1C2F3C;
  --line: #2D4555;
  --ink: #E9F0F5;
  --muted: #ABC4D8;
  --quiet: #819AAF;
  --green: #B3DDA8;
  --teal: #A8D8D1;
  --blue: #90BFE3;
  --amber: #E2B981;
  --red: #E0A296;

  --sans: "Manrope", "IBM Plex Sans", "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", Menlo, Consolas, monospace;

  --radius: 11px;
  --pad: clamp(20px, 4.1vw, 70px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p { margin: 0; }
a { text-decoration: none; color: inherit; }
button, input, select { font: inherit; }
button { cursor: pointer; }
img, svg { display: block; }
.icon { flex: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

.eyebrow { font-size: 10px; letter-spacing: 1.4px; text-transform: uppercase; color: #9DB7CA; font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 5px; background: #223544; color: #B8CFDF; border: 1px solid #344E60; border-radius: 5px; padding: 4px 8px; font-size: 10px; font-weight: 600; white-space: nowrap; }
.pill.good { background: #1C3932; border-color: #345C4D; color: #AFDEC9; }
.pill.amber { background: #322D25; border-color: #62513A; color: #E8C397; }

.btn { height: 44px; min-height: 44px; border: 1px solid #476174; background: #1A2C3B; color: #DCE9F2; border-radius: 7px; padding: 0 15px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; white-space: nowrap; font-size: 13px; font-weight: 700; }
.btn.primary { color: #172A1D; background: var(--green); border-color: var(--green); }
.btn.quiet { border-color: transparent; background: transparent; color: #AFC6D6; }
.btn.small { height: 38px; min-height: 38px; font-size: 12px; padding: 0 13px; }
.btn.full { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
button:hover, a.btn:hover { filter: brightness(1.08); }

.text-link { font-size: 13px; color: var(--teal); font-weight: 600; display: inline-flex; gap: 6px; align-items: center; }
.text-link:hover { text-decoration: underline; }

/* Preserve the full supplied figure; never mirror the robotic arm. */
.krell-illustration { display: block; max-width: 100%; height: auto; object-fit: contain; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; animation: none !important; }
}