/* Shared theme for resource subpages (how-it-works, math, competitors,
   hyperscale, whitepaper, thermal). Loaded after tailwind.css and each
   page's inline styles so the older Tailwind-era pages match the
   redesigned pages styled by assets/site.css. */

:root,
:host {
  --color-kx-bg: #ffffff;
  --color-kx-surface: #f9fafb;
  --color-kx-border: #e5e7eb;
  --color-kx-card: #ffffff;
  --color-kx-navy: #059669;
  --color-kx-navy-light: #047857;
  --color-kx-amber: #059669;
  --color-text-primary: #111827;
  --color-text-secondary: #374151;
  --color-text-muted: #6b7280;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: #ffffff;
  color: #374151;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: #111827;
}

.metric-value {
  font-family: "Space Grotesk", "Inter", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
}

a { color: #059669; }
strong { color: #111827; }

/* Buttons — match site.css .btn-primary / .btn-secondary */
.btn-primary {
  background: #111827;
  background-color: #111827;
  color: #ffffff;
  font-weight: 600;
  border-radius: 8px;
  transition: background 0.2s ease;
}
.btn-primary:hover {
  background: #374151;
  background-color: #374151;
  transform: none;
  box-shadow: none;
}
.btn-secondary {
  background: transparent;
  border: 1px solid #e5e7eb;
  color: #111827;
  font-weight: 600;
  border-radius: 8px;
  transition: border-color 0.2s ease;
}
.btn-secondary:hover {
  border-color: #6b7280;
  color: #111827;
}

/* Cards — match site.css .card */
.surface-card {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.surface-card:hover { border-color: #6ee7b7; }
.paper-block {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* Tables — match site.css table styles */
.data-table {
  font-family: inherit;
  font-size: 0.92rem;
  border-radius: 12px;
  overflow: hidden;
}
.data-table th {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
  color: #6b7280;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.65rem 0.75rem;
  text-align: left;
}
.data-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 0.65rem 0.75rem;
  color: #374151;
  font-variant-numeric: tabular-nums;
}
.data-table tr:hover { background: #f9fafb; }
.winner {
  background-color: #d1fae5;
  color: #065f46;
  font-weight: 600;
}

/* Inline code and code blocks — match site.css */
code {
  background-color: #f3f4f6;
  color: #111827;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  border-radius: 4px;
}
pre {
  background: #f3f4f6;
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  color: #374151;
}

/* Color classes referenced by these pages that are absent from the
   compiled Tailwind build */
.text-solar-cyan { color: #f59e0b; }
.border-solar-cyan { border-color: #f59e0b; }