/* Open DJ, TWO DECKS build: design tokens.
   Layout idea: a black deck (A) and a white deck (B) share one fixed stage. The border between them
   is the crossfader position --x (0 = all Deck A, black; 1 = all Deck B, white), set by the docked
   fader in site.js. Running text is white ink drawn with mix-blend-mode: difference, so every glyph
   renders as the inverse of the deck behind it at every fader position.
   The first block is the shared token set from website/GOAL.md, verbatim. The second block adds the
   direction tokens. Components use the direction and role tokens only. */

:root{
  --black:#0a0a0a; --white:#f4f4f2; --steel:#8b8d8f;
  --line-on-black:#2a2b2c; --line-on-white:#cfcfcb;
  --mark-dark:#9c4b34; --mark-light:#d97757; --accent:#f26b21;
  --font-display:"Anybody","Arial Black",Impact,sans-serif;  /* 800, font-stretch 150%, caps */
  --font-body:"Geist",ui-sans-serif,system-ui,sans-serif;
  --font-mono:"Geist Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(16px,4vw,56px); --max:1240px;
  --ease-out:cubic-bezier(.16,.84,.3,1); --dur-fast:150ms; --dur:400ms; --dur-slow:1100ms;
}

/* ---------- direction tokens: two decks ---------- */
:root{
  /* the decks */
  --deck-a: var(--black);
  --deck-b: var(--white);
  --x: .5;                                   /* crossfader, written by site.js */
  --g: 0;                                    /* |x - 0.5| * 2, how far the mark halves have parted */
  --split: calc((1 - var(--x)) * 100%);      /* Deck B covers the viewport from --split to the right edge */
  --deck-split: linear-gradient(90deg, var(--deck-a) var(--split), var(--deck-b) var(--split));

  /* ink: always composited with mix-blend-mode: difference (class .ink) */
  --ink: #ffffff;                            /* renders #f5f5f5 on Deck A and #0b0b0d on Deck B */
  --ink-muted: #9a9a9a;                      /* renders #909090 on Deck A (6.2:1) and #5a5a58 on Deck B (6.3:1) */
  --ink-line: rgba(255,255,255,.28);         /* hairlines; symmetric on both decks */
  --ink-panel: rgba(255,255,255,.05);        /* faint fills; symmetric on both decks */
  --ink-panel-2: rgba(255,255,255,.09);
  --knock: #000000;                          /* inside an ink group, pure black shows the deck through unchanged */

  /* role names kept from the skeleton, mapped onto ink */
  --bg: var(--knock);
  --fg: var(--ink);
  --muted: var(--ink-muted);
  --faint: var(--ink-muted);
  --line: var(--ink-line);
  --panel: var(--ink-panel);
  --panel-2: var(--ink-panel-2);

  /* illustration objects: normal blend, the same dark object on both decks */
  --rig-bg: #0d0d0e;
  --rig-panel: #151517;
  --rig-line: #2a2a2f;
  --rig-fg: #ececed;
  --rig-dim: #9b9ba3;                        /* 6.9:1 on --rig-bg */
  --rig-wave: #a9a9ae;
  --rig-wave-hi: #d4d4d8;

  /* layout chrome: the space the sticky nav and the docked fader take */
  --nav-h: 60px;
  --dock-h: 60px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: dark;
}

/* Short screens: smaller chrome, so the fader dock and the nav leave room for reading. */
@media (max-height: 560px){
  :root{ --nav-h: 52px; --dock-h: 48px; }
}

/* Theme note: this direction has no light or dark mirror on purpose. The page IS black versus
   white, and the reader picks the mix with the fader. prefers-color-scheme is not consulted. */

/* Self-hosted display face: Anybody 800 at width 150, the shipped subset from docs/brand/doc-style
   (A-Z, a-z, digits, basic punctuation), SIL OFL 1.1 (assets/fonts/Anybody-OFL.txt). */
@font-face{
  font-family:"Anybody";
  src:url("fonts/anybody-800-w150-headline.woff2") format("woff2");
  font-weight:800;
  font-stretch:150%;
  font-style:normal;
  font-display:swap;
}