/* HCRIS v2 — Data platform aesthetic.
   Cool slate surfaces, electric-blue accent, mono+sans only. */

@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap");

:root {
  /* Slate — cool ink scale. Borders, type, chrome. */
  --slate-950: oklch(0.16 0.025 256);
  --slate-900: oklch(0.22 0.030 256);
  --slate-800: oklch(0.30 0.030 256);
  --slate-700: oklch(0.40 0.025 256);
  --slate-600: oklch(0.52 0.022 256);
  --slate-500: oklch(0.64 0.018 256);
  --slate-400: oklch(0.74 0.012 256);
  --slate-300: oklch(0.84 0.008 256);
  --slate-200: oklch(0.91 0.005 256);
  --slate-150: oklch(0.94 0.004 256);
  --slate-100: oklch(0.965 0.003 256);
  --slate-50:  oklch(0.985 0.002 256);

  /* Surfaces */
  --surface:   oklch(0.99 0.002 256);
  --surface-2: oklch(0.965 0.003 256);
  --surface-3: oklch(0.94 0.004 256);

  /* Electric — the single brand accent. Links, primary fill, focus. */
  --volt-700: oklch(0.42 0.22 252);
  --volt-600: oklch(0.50 0.23 252);
  --volt-500: oklch(0.58 0.22 252);
  --volt-300: oklch(0.82 0.10 252);
  --volt-100: oklch(0.94 0.04 252);

  /* Semantic — used inside data cells only. */
  --pos:      oklch(0.55 0.16 145);
  --pos-soft: oklch(0.94 0.05 145);
  --neg:      oklch(0.55 0.18 25);
  --neg-soft: oklch(0.94 0.05 25);
  --warn:     oklch(0.72 0.16 75);

  /* Type */
  --sans: "Geist", "Söhne", system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Radius — sharp by default. */
  --r-0: 0px;
  --r-2: 2px;
  --r-4: 4px;
  --r-6: 6px;
  --r-full: 999px;
}

.hcris-root {
  font-family: var(--sans);
  color: var(--slate-950);
  background: var(--surface);
  font-feature-settings: "ss01", "ss02", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.hcris-root .num,
.hcris-root .mono {
  font-family: var(--mono);
  font-feature-settings: "tnum", "zero", "ss01";
  font-variant-numeric: tabular-nums slashed-zero;
}

/* Uppercase technical micro-label — replaces the masthead strip. */
.hcris-root .micro {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--slate-600);
}

/* Subtle dot-grid background for hero panels */
.hcris-grid {
  background-image: radial-gradient(circle at 1px 1px, oklch(0.16 0.025 256 / 0.06) 1px, transparent 0);
  background-size: 16px 16px;
}

/* Hairline rules */
.hcris-rule { border: 0; border-top: 1px solid var(--slate-200); margin: 0; }
.hcris-rule-strong { border: 0; border-top: 1px solid var(--slate-950); margin: 0; }

/* Terminal-prompt chevron — recurring motif */
.hcris-prompt {
  font-family: var(--mono);
  color: var(--volt-500);
  font-weight: 600;
  font-feature-settings: "ss01";
}

/* Tabular number cells */
.hcris-root td.num, .hcris-root th.num {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums slashed-zero;
  text-align: right;
}

/* Status pill */
.hcris-root .pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: var(--r-2);
  background: var(--slate-100);
  color: var(--slate-700);
  border: 1px solid var(--slate-200);
}
.hcris-root .pill::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.hcris-root .pill.pos { background: var(--pos-soft); color: var(--pos); border-color: transparent; }
.hcris-root .pill.neg { background: var(--neg-soft); color: var(--neg); border-color: transparent; }
.hcris-root .pill.volt { background: var(--volt-100); color: var(--volt-700); border-color: transparent; }

/* Button primitives */
.hcris-root .btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--r-4);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s;
  white-space: nowrap;
}
.hcris-root .btn-primary { background: var(--slate-950); color: var(--surface); }
.hcris-root .btn-volt    { background: var(--volt-500);  color: white; }
.hcris-root .btn-ghost   { background: transparent; color: var(--slate-950); border-color: var(--slate-300); }

/* Input */
.hcris-root .input {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 10px;
  font-family: var(--sans); font-size: 13px;
  color: var(--slate-700);
  background: var(--surface);
  border: 1px solid var(--slate-200);
  border-radius: var(--r-4);
}
.hcris-root .input .kbd {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 5px;
  border: 1px solid var(--slate-200);
  border-radius: 3px;
  color: var(--slate-600);
}

/* Code block */
.hcris-root .code {
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.6;
  background: var(--slate-950);
  color: var(--slate-100);
  padding: 16px 18px;
  border-radius: var(--r-4);
  overflow: hidden;
}
.hcris-root .code .kw { color: oklch(0.72 0.16 290); }     /* keyword purple */
.hcris-root .code .fn { color: var(--volt-300); }
.hcris-root .code .st { color: oklch(0.78 0.14 145); }     /* string green */
.hcris-root .code .nm { color: oklch(0.82 0.14 60); }      /* number amber */
.hcris-root .code .cm { color: var(--slate-500); font-style: italic; }