/* Barycenters Systems — compiled design-system stylesheet. */

/* Barycenters Systems — typographic system
 * Space Grotesk = institutional voice (display / headlines)
 * Inter         = operational clarity (body / UI)
 * JetBrains Mono = proof surface (hashes, proofs, adapter IDs, timestamps)
 * Self-contained variable woff2 — no runtime font service, no network. */

@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url("./fonts/space-grotesk-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("./fonts/inter-variable.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url("./fonts/jetbrains-mono-variable.woff2") format("woff2");
}


/* Barycenters Systems — design tokens
 *
 * COLOR LAW (meaning, not decoration):
 *   Navy        = consequence space   (surfaces, depth, cryptographic certainty)
 *   Blue-white  = lawful structure    (text, interfaces, information)
 *   Steel gray  = structure           (borders, boundaries, components)
 *   Cyan        = active runtime ONLY (admission active, proof running, adapter online, selected trace)
 *   Black/white = proof surface       (legal, proof, high-contrast, print)
 *
 * Cyan is never part of a static/decorative surface. If something is cyan,
 * the system is doing something.
 */

:root {
  /* ── Consequence space (navy voids & surfaces, darkest → lightest) ── */
  --bc-void: #050a12;          /* app background */
  --bc-deep-navy: #07111f;     /* raised background */
  --bc-midnight: #0a1020;      /* panel base */
  --bc-surface-1: #122131;     /* card surface */
  --bc-surface-2: #1c2433;     /* elevated surface */
  --bc-steel-slate: #1e293b;   /* input / inset surface */
  --bc-structural: #2b3442;    /* strongest neutral fill */

  /* ── Structure (borders & dividers) ── */
  --bc-border: #273647;        /* default border / divider */
  --bc-border-strong: #3a4658; /* emphasized border */

  /* ── Lawful structure (text, tertiary → on-dark) ── */
  --bc-text-disabled: #4b5563;
  --bc-text-tertiary: #7d8796; /* metadata, timestamps, captions */
  --bc-text-secondary: #a7b3c7;
  --bc-text-primary: #d8e4f2;  /* primary blue-white */
  --bc-text-on-dark: #eaf2ff;  /* logo / max-contrast on navy */

  /* ── Proof surface (legal / print / one-color) ── */
  --bc-black: #050505;
  --bc-white: #ffffff;

  /* ── Active runtime signal (cyan family — use only for active state) ── */
  --bc-cyan: #00bfef;          /* active accent / admission */
  --bc-electric-blue: #35d7ff; /* focus / hover / live edge */
  --bc-seam: #00bfef;          /* system-state seam flash */

  /* ── Semantic ── */
  --bc-success: #00e6b0;
  --bc-error: #ff4d4f;

  /* ── Semantic aliases (prefer these in components) ── */
  --bc-bg: var(--bc-void);
  --bc-bg-raised: var(--bc-deep-navy);
  --bc-panel: var(--bc-surface-1);
  --bc-panel-elevated: var(--bc-surface-2);
  --bc-accent: var(--bc-cyan);
  --bc-focus: var(--bc-electric-blue);

  /* ── Typography families ── */
  --bc-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --bc-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --bc-font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  /* ── Type scale (display uses Space Grotesk, body uses Inter) ── */
  --bc-text-xs: 0.75rem;   /* 12 — metadata */
  --bc-text-sm: 0.875rem;  /* 14 — secondary UI */
  --bc-text-base: 1rem;    /* 16 — body */
  --bc-text-lg: 1.125rem;  /* 18 */
  --bc-text-xl: 1.5rem;    /* 24 — headline */
  --bc-text-2xl: 2rem;     /* 32 — display */
  --bc-text-3xl: 2.75rem;  /* 44 — hero */

  --bc-weight-regular: 400;
  --bc-weight-medium: 500;
  --bc-weight-semibold: 600;
  --bc-weight-bold: 700;

  --bc-leading-tight: 1.15;
  --bc-leading-normal: 1.5;
  --bc-tracking-tight: -0.02em;
  --bc-tracking-wide: 0.08em; /* eyebrow / label caps */

  /* ── Spacing scale (4px base) ── */
  --bc-space-1: 0.25rem;
  --bc-space-2: 0.5rem;
  --bc-space-3: 0.75rem;
  --bc-space-4: 1rem;
  --bc-space-5: 1.5rem;
  --bc-space-6: 2rem;
  --bc-space-8: 3rem;

  /* ── Radii ── */
  --bc-radius-sm: 4px;
  --bc-radius-md: 8px;
  --bc-radius-lg: 12px;
  --bc-radius-pill: 999px;

  /* ── Borders & elevation ── */
  --bc-border-width: 1px;
  --bc-shadow-panel: 0 1px 2px rgba(5, 10, 18, 0.6), 0 8px 24px rgba(5, 10, 18, 0.45);
  --bc-glow-active: 0 0 0 1px var(--bc-cyan), 0 0 12px rgba(0, 191, 239, 0.35);
}


/* Barycenters Systems — base element defaults.
 * Applies the color law at the root: navy consequence space + blue-white text.
 * Scope everything under .bc-root so the design can opt in without a global reset,
 * but html/body defaults are set too for full-page designs. */

:where(html) {
  color-scheme: dark;
}

.bc-root,
:where(body) {
  background: var(--bc-void);
  color: var(--bc-text-primary);
  font-family: var(--bc-font-body);
  font-size: var(--bc-text-base);
  line-height: var(--bc-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.bc-root :where(h1, h2, h3, h4) {
  font-family: var(--bc-font-display);
  font-weight: var(--bc-weight-bold);
  line-height: var(--bc-leading-tight);
  letter-spacing: var(--bc-tracking-tight);
  color: var(--bc-text-on-dark);
  margin: 0;
}

.bc-root :where(h1) { font-size: var(--bc-text-3xl); }
.bc-root :where(h2) { font-size: var(--bc-text-2xl); }
.bc-root :where(h3) { font-size: var(--bc-text-xl); }

.bc-root :where(code, pre, kbd, samp) {
  font-family: var(--bc-font-mono);
  font-size: 0.9em;
}

/* Eyebrow / section label — small caps, tracked, tertiary. */
.bc-eyebrow {
  font-family: var(--bc-font-display);
  font-size: var(--bc-text-xs);
  font-weight: var(--bc-weight-medium);
  letter-spacing: var(--bc-tracking-wide);
  text-transform: uppercase;
  color: var(--bc-text-tertiary);
}

/* Metadata / proof text — monospace, tertiary. */
.bc-meta {
  font-family: var(--bc-font-mono);
  font-size: var(--bc-text-xs);
  color: var(--bc-text-tertiary);
}

/* Active-state seam: the only place cyan lives on an otherwise static element. */
.bc-active {
  color: var(--bc-cyan);
}

.bc-root :where(:focus-visible) {
  outline: 2px solid var(--bc-focus);
  outline-offset: 2px;
}