/* Design tokens for the pxl.brigada.dev landing page.
 *
 * Transcribed from design/pxl-design/DESIGN.md. The handoff ships a 1440px
 * canvas export with every value inlined on every element; these are the same
 * values named once, so a change lands in one place and the seven sections the
 * design specifies can be built against them.
 *
 * Two rules from the handoff that a token file cannot enforce, restated here
 * because they are easy to break by accident:
 *
 *   There is exactly ONE accent. Do not add a second. `--gold` is for the
 *   plume in the artwork and never for UI.
 *
 *   `--dim` is below 4.5:1 on `--ground`. It is for 10px meta and tick marks -
 *   never for anything a visitor has to read.
 *
 * Deliberately not themed. The film is dark and the page is one visual world,
 * so these sit on :root unconditionally rather than behind a theme query.
 */
:root {
  --ground: #08080a;
  --panel: #0b0b10;
  --panel-raised: #0e0e14;

  --hairline: rgba(255, 255, 255, 0.10);
  --hairline-strong: rgba(255, 255, 255, 0.18);
  --hairline-faint: rgba(255, 255, 255, 0.06);

  --text: #f4f3ef;
  --muted: #a6a6b0;
  --label: #8b8b96;
  --dim: #5a5a64;

  --accent: #2f7df6;
  --accent-lift: #6ea6ff;     /* hover only; not a second accent */
  --warn: #ff5c3e;            /* parse errors only */
  --gold: #f0c840;            /* plume, never UI */

  /* Code token colours, for the .pxl listings the page prints. */
  --code-keyword: var(--accent);
  --code-value: #d8d8e2;
  --code-arg: #8f8fa0;
  --code-comment: #6e7f6a;
  --code-letter: #c9c9d4;
  --code-dot: #33333d;

  --display: 'Space Grotesk', Verdana, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Content width 1280 inside 80px page padding; 20px on a phone. */
  --content: 1280px;
  --gutter: 80px;

  /* The checkerboard behind every sprite. One definition, because it appears
     in the ticker, both result panels and the anatomy block. */
  --checker: repeating-conic-gradient(
    rgba(255, 255, 255, 0.045) 0% 25%, rgba(255, 255, 255, 0.012) 0% 50%);
  --checker-size: 9px 9px;
}

@media (max-width: 760px) {
  :root { --gutter: 20px; }
}

/* The 48px grid the page sits on, at 2.2% white. On whatever element is the
   page ground, so a section can opt out by painting over it. */
.pxl-ground {
  background-color: var(--ground);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 48px 48px;
  color: var(--text);
}

/* Nothing on this page is rounded and nothing has a shadow. A panel is a
   hairline box, full stop. */
.pxl-panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: 0;
  box-shadow: none;
}

.pxl-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--label);
}

/* Real labels for real inputs, kept out of the way rather than replaced by a
   placeholder. The handoff is explicit that every control stays a control. */
.pxl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The canvas export carries no focus styles at all - it was never driven by a
   keyboard. One ring, on the accent, everywhere. */
.pxl-ground :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}