/* ==========================================================================
   Hegemann Schorsch — terminal design tokens.

   Minimalist hacker terminal: pitch black, one mono family, one accent ramp.
   Hard constraints: no border-radius, no shadows, no gradients, no
   transparency on surfaces. These are constraints of the direction, not
   defaults that may drift.

   This file is the design bundle's tokens.css
   (hegemann-schorsch-ai-advisory-branding/design_handoff_terminal_site/)
   with three deviations, each marked DEVIATION below, so it can be
   re-synced when the design moves on. Site layout belongs in site.css.
   ========================================================================== */

/* DEVIATION 1: the bundle loads JetBrains Mono from Google Fonts. This site
   makes no external requests at runtime, so the family is self-hosted. The
   full webfont ships unsubsetted on purpose — a latin subset drops the box
   drawing block (U+2500–257F), and every rule on this site is drawn with it. */
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/assets/fonts/jetbrains-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  /* phosphor green — the shipping palette */
  --acc: #00FF00;  /* links, headings, numbers, cursors      15.3:1 on black */
  --txt: #5FD65F;  /* body                                   11.3:1 on black */
  --mid: #42AC42;  /* secondary prose, small print            7.2:1 on black */
  --dim: #1F6B1F;  /* chrome ONLY: rules, glyphs, borders     3.2:1 on black */
  --bg:  #000000;

  /* --dim fails 4.5:1 and is never allowed to carry text that has to be read.
     Structure and decoration only; secondary copy takes --mid. site.css
     follows this split, and the box-drawing runs it colours are aria-hidden. */

  --row-border: rgba(31, 107, 31, .5);

  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --fs-meta: 11px;
  --fs-chrome: 12px;
  --fs-body: 13px;
  --fs-lead: 14px;
  --fs-title: 15px;
  --fs-name: 16px;
  --fs-stat: 20px;
  --fs-display: 24px;

  --lh-heading: 1.5;
  --lh-body: 1.85;
  --lh-lead: 1.9;
  --lh-tree: 2;

  --shell-max: 1400px;
  --sidebar-w: 250px;
  --section-gap: 52px;
  --box-indent: 22px;
}

/* DEVIATION 2: the bundle ships three palettes behind [data-palette]. Green is
   the palette this site ships with. The other two ramps are reachable through
   the `theme` command of the sidebar shell — a per-page toggle that is never
   stored — so they live here as real rules rather than as a comment. */
:root[data-palette="amber"] {
  --acc: #FFB000; --txt: #D18E12; --mid: #A8730F; --dim: #6B4A0C;
  --row-border: rgba(107, 74, 12, .5);
}
:root[data-palette="white"] {
  --acc: #FFFFFF; --txt: #BFBFBF; --mid: #8C8C8C; --dim: #5A5A5A;
  --row-border: rgba(90, 90, 90, .5);
}

/* Padding counts inward everywhere. The sidebar is height:100vh with padding
   and the main column is a grid track with padding; under content-box both
   would overflow by exactly their padding. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--txt);
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--acc); text-decoration: none; }
a:hover { background: var(--acc); color: #000; }
::selection { background: var(--acc); color: #000; }

/* DEVIATION 3: the prototype inverts on hover and has no focus treatment. A
   keyboard user needs the same affordance plus something that survives the
   inversion, hence the outline. */
a:focus-visible {
  background: var(--acc);
  color: #000;
  outline: 2px solid var(--acc);
  outline-offset: 2px;
}

/* hard on/off flip — cursors */
@keyframes cur { 0%, 49% { opacity: 1 } 50%, 100% { opacity: 0 } }
/* soft breath — live status dot. The contrast between the two is intentional. */
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .12 } }

.cursor {
  display: inline-block;
  width: 7px; height: 13px;
  background: var(--acc);
  animation: cur 1.1s step-end infinite;
}
.status-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--acc);
  flex: none;
  animation: pulse 1.6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .cursor, .status-dot { animation: none; }
}